2018-09-14 Vue的指令（下）
2018-09-14 本文已影响0人
Alive_92dc
1.vue的指令
v-for=" v-model=" v-on:click=" v-show/v-if=“” v-bind:属性名=“”
v-else=" v-else-if="
2.v-model:双向数据绑定，用于表单元素
<div class="itany">
<input type="text" v-model="mes">
<p>{{mes}}</p>
<button v-on:click="ait">按钮</button>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:".itany",
data:{
mes:"hello vue"
},
methods:{
ait:function(){
alert("hello vue")
// console.log(this.mes)
}
}
})
</script>
3.v-bind:绑定属性
<div class="itany">
<img v-bind:src="url" v-on:click="alt" alt="" />
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:".itany",
data:{
url:"img/1.jpg",
flag:true
},
methods:{
alt:function(){
if(this.flag==true){
this.url="img/2.jpg",
this.flag=false
}else{
this.url="img/1.jpg",
this.flag=true
}
}
}
})
</script>
3.v-on:绑定事件
<div id='itany'>
<button v-on:click='alt'>按钮</button>
</div>
<script src='js/vue.js'></script>
<script>
var vm=new Vue({
el:'#itany',
data:{
msg:'hello'
},
methods:{
alt:function(){
// alert(000)
// console.log(this.msg);
console.log(vm.msg);
}
}
})
</script>
4.v-show:控制元素的显示隐藏：使用display:none
<div class="itany">
<h1>{{msg}}</h1>
<h3 v-show="see">{{msg}}</h3>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:".itany",
data:{
msg:"hello world",
see:false
}
})
</script>
5.v-if,v-else,v-else-if
<body>
<div class="itany">
<p v-if="num==1">11111</p>
<p v-else-if="num==2">22222</p>
<p v-else-if="num==3">33333</p>
<p v-else-if="num==4">44444</p>
<p v-else="num==5">55555</p>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:".itany",
data:{
num:Math.floor(Math.random()*(5-0+1)+0)
}
})
</script>
</body>
实例-添加删除
<body>
<div id='itany'>
<input type="text" v-model='txt'> <button v-on:click='add'>添加</button>
<ul>
<li v-for="(value,index) in arr">
{{value}}
<button v-on:click='delt(index)'>删除</button>
</li>
</ul>
</div>
<script src='js/vue.js'></script>
<script>
new Vue({
el:'#itany',
data:{
arr:['吃饭','睡觉','打游戏'],
txt:''
},
methods:{
add:function(){
this.arr.push(this.txt),
this.txt=''
},
delt:function(ind){
this.arr.splice(ind,1)
}
}
})
</script>
</body>
实例-按钮切换
<body>
<div class="itany">
<p>{{msg}}</p>
<button v-on:click="alt">按钮</button>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:".itany",
data:{
msg:"hello world",
flag:true,
},
methods:{
alt:function(){
if(this.flag==true){
this.msg="hello vue",
this.flag=false
}else{
this.msg="hello world",
this.flag=true
}
}
}
})
</script>
</body>
实例-显示隐藏
<body>
<div class="itany">
<button v-on:click="out">点击隐藏</button>
<div class="box" v-show="see"></div>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:".itany",
data:{
see:true
},
methods:{
out:function(){
// if (this.see==true) {
// this.see=false
// } else{
// this.see=true
// }
this.see=!this.see
}
}
})
</script>
</body>
