<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.card{
width: 200px;
background: #ccc;
padding: 10px;
margin: 5px;
}
</style>
</head>
<body>
<div id="app">
<div v-pin="card1.pinned" class="card">
<button @click="card1.pinned = !card1.pinned">点我啊~</button>
this is my first card!
this is my first card!
this is my first card!
this is my first card!
this is my first card!
</div>
<div v-pin="card2.pinned" class="card">
<a @click="card2.pinned = !card2.pinned" href="#">please touch me</a>
this is my second card!
this is my second card!
this is my second card!
this is my second card!
this is my second card!
</div>
<div>
this is my test code@!
<br>
this is my test code@!
<br>
this is my test code@!
<br>
this is my test code@!
<br>
this is my test code@!
<br>
this is my test code@!
<br>
this is my test code@!
<br>
this is my test code@!
<br>
this is my test code@!
<br>
this is my test code@!
<br>
this is my test code@!
<br>
this is my test code@!
<br>
this is my test code@!
<br>
this is my test code@!
<br>
this is my test code@!
<br>
this is my test code@!
<br>
this is my test code@!
<br>
this is my test code@!
<br>
this is my test code@!
<br>
this is my test code@!
<br>
this is my test code@!
<br>
this is my test code@!
<br>
this is my test code@!
<br>
this is my test code@!
<br>
this is my test code@!
<br>
this is my test code@!
<br>
this is my test code@!
<br>
this is my test code@!
<br>
this is my test code@!
<br>
this is my test code@!
<br>
this is my test code@!
<br>
this is my test code@!
<br>
this is my test code@!
<br>
</div>
</div>
<script src="../lib/vue.js"></script>
<script src="js/main.js"></script>
</body>
</html>
Vue.directive("pin",function (el,binding) {
var pinned = binding.value;
if(pinned){
el.style.position = "fixed",
el.style.top = "20px",
el.style.left = "20px"
}else{
el.style.position = "static"
}
});
var app = new Vue({
el:"#app",
data:{
card1:{
pinned:false
},
card2:{
pinned:false
}
}
});