v-on:（事件）=" " v-on:指令是用来绑定事件的。
v-bind:（标签的属性）：属性值 v-bind：指令是绑定属性。
v-show=" " v-show：指令是控制元素的显示和隐藏。
v-if v-else if 用于条件判断。
v-model 双向数据绑定，
v-on 绑定事件例子：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<script src="js/vue.js"></script>
<div id="box">
<input type="text" v-model="tex"/>
<button v-on:click="add">按钮</button>
<ul>
<li v-for="(value,index) in arr">{{value}}</li>
<button v-on:click="app(index)">删除</button>
</ul>
</div>
<script>
new Vue({
el:'#box',
data:{
arr:['成功','需要','努力'],
tex:''
},
methods:{
add:function(){
this.arr.push(this.tex)
this.tex=''
},
app:function(i){
this.arr.splice(i,1)
}
}
})
</script>
</body>
</html>
v-bind绑定元素例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script src="js/vue.js"></script>
<div id="box">
<img v-bind:src="ul" alt="" v-on:click="add"/>
</div>
<script>
new Vue({
el:'#box',
data:{
ul:'img/2.jpg',
bool:true
},
methods:{
add:function(){
if(this.bool==true){
this.ul='img/2.jpg'
this.bool=false
}else{
this.ul='img/3.jpg'
this.bool=true
}
}
}
})
</script>
</body>
</html>
v-show 控制元素的显示和隐藏，例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.a{
width: 200px;
height: 100px;
background: red;
border: 1px solid red;
}
</style>
</head>
<body>
<script src="js/vue.js"></script>
<div id="box">
<button v-on:click="add">隐藏</button>
<div class="a" v-show="qq"></div>
</div>
<script>
new Vue({
el:'#box',
data:{
qq:true
},
methods:{
add:function(){
if(this.qq==true){
this.qq=false
}else{
this.qq=true
}
}
}
})
</script>
</body>
</html>
v-if v-else if 用于条件判断，小例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script src="js/vue.js"></script>
<div id="box">
<p v-if="num==0">1111</p>
<p v-else-if="num==1">222</p>
<p v-else-if="num==2">333</p>
<p v-else="num==3">4444</p>
</div>
<script>
new Vue({
el:'#box',
data:{
num:Math.floor(Math.random()*(5-1+1)+0)
}
})
</script>
</body>
</html>
网友评论