v-bind绑定属性；
v-bind：“属性名”
v-bind：的简写（：）
列
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="box">
<img v-bind:src="url" v-on:click="btn"/>
</div>
<script>
//v-bind的应用
new Vue({
el:"#box",
data:{
url:"img/1.png"
}
})
</script>
</body>
</html>
v-bind小项目
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="box">
<img v-bind:src="url" v-on:click="btn"/>
</div>
<script>
//图片切换
new Vue({
el:"#box",
data:{
url:"img/1.png",
flag:true
},
methods:{
btn:function(){
//第一种方法
//this.url="img/梦妆.png"
//第二种方法
if(this.flag){
this.url="img/梦妆.png"
this.flag:false
}else{
this.url="img/1.png"
this.flag:true
}
}
}
})
</script>
</body>
</html>
v-on:绑定事件
v-on：事件名=“函数”
一.实现文字的单项切换
<div class="box">
<input type="text" v-model="msg"/>
<p>{{msg}}<p>
<button v-on:click="alt">点击</button>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:".box",
data:{
msg:"hello word"
},
methods:{
alt:function(){
this.msg="hello vue"
}
}
})
</script>
2）
<div class="box">
<input type="text" v-model="msg"/>
<p>{{msg}}<p>
<button v-on:click="alt">点击</button>
</div>
<script src="js/vue.js"></script>
<script>
var vm=new Vue({
el:".box",
data:{
msg:"hello word"
},
methods:{
alt:function(){
vm.msg="hello vue"
}
}
})
</script>
二、实现文字的双向切换
1）
<div class="box">
<input type="text" v-model="msg"/>
<p>{{msg}}<p>
<button v-on:click="alt">上一张</button>
<button v-on.click="abg">下一张</button>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:".box",
data:{
msg:"hello word"
},
methods:{
alt:function(){
this.msg="hello vue"
}，
abg:function(){
this.msg="hello word"
}
}
})
</script>
2）
<div class="box">
<input type="text" v-model="msg"/>
<p>{{msg}}<p>
<button v-on:click="alt">上一张</button>
<button v-on.click="abg">下一张</button>
</div>
<script src="js/vue.js"></script>
<script>
var vm=new Vue({
el:".box",
data:{
msg:"hello word"
},
methods:{
alt:function(){
vm.msg="hello vue"
},
abg:function(){
vm.msg="hello word"
}
}
})
</script>
方法二
1）
<div class="box">
<input type="text" v-model="msg"/>
<p>{{msg}}<p>
<button v-on:click="alt">点击</button>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:".box",
data:{
msg:"hello word",
flag:true
},
methods:{
alt:function(){
if(this.flag){
this.msg="hello vue",
this.flag=flase
}else{
this.msg="hello word"
this.flag=flase
}
}
}
})
</script>
2）
<div class="box">
<input type="text" v-model="msg"/>
<p>{{msg}}<p>
<button v-on:click="alt">点击</button>
</div>
<script src="js/vue.js"></script>
<script>
var vm=new Vue({
el:".box",
data:{
msg:"hello word",
flag:true
},
methods:{
alt:function(){
if(this.flag){
vm.msg="hello vue",
vm.flag=flase
}else{
vm.msg="hello word"
vm.flag=flase
}
}
}
})
</script>
v-if控制元素的显示和隐藏
一.使用v-if与在css中用visibility：hidden;相同
二.v-if是动态的向DOM树内添加或者删除DOM元素；
三.v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；
v-if适合运营条件不大可能改变；
v-show的讲解
一.’v-show是通过设置DOM元素的display样式属性控制显隐；
二.v-show只是简单的基于css切换；
三.v-show适合频繁切换。
网友评论