一：v-model
v-model双向数据绑定，用于表单元素
//html
<div id="app">
{{mass}}
<input type="text" v-model="mass">
<button v-on:click="fun()"></button>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script>
var app=new Vue({
el:'#app',//绑定一个元素，选择器
data:{
mass:'asdf',
arr:1
},
})
</script>
二、v-on绑定事件
v-on：事件名=“函数名”
<div id="app">
{{mess}}
<button v-on:click="but">绑定事件</button>
</div>
点击按钮弹框
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script>
var app=new Vue({
el:'#app',
data:{
name:'hello vue'
},
methods:{
but:function(){
// alert(this.name)
alert(app.name)
}
}
})
</script>
点击按钮更换文字
<script>
var app=new Vue({
el:'#app',
data:{
mess:'wwwww',
mass:'asdfa'
},
methods:{
but:function(){
/*this.mess='我是谁'*/
this.mess=this.mass
}
}
})
</script>
三、v-show控制元素的现实与隐藏
v-show=“ ” 使用display：none隐藏
<div id="app">
<h1>{{mas}}</h1>
<h4 v-show="massage">{{mas}}</h4><!--asdf-->
<h4 v-show="!massage">{{mas}}</h4><!--后台输出fasle-->
</div>
<script src="js/vue.js"></script>//下载后的链接
<script>
new Vue({
el:'#app',
data:{
mas:"asdf",
massage:true
}
})
</script>
复习函数调用
&& 与：两个条件都对则为对
|| 或：一个条件对则为对
<script>
var a=3;
var b=4;
console.log(a>4||b>4)
//true
</script>
！ 非：取反
<script>
console.log(!true);
//flase
</script>
练习v-show
Image 1.png
点击隐藏按钮把下面的div隐藏
代码如下：
<div id="itany">
<button v-on:click="fun">转换</button>
<div v-show="see"></div>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#itany",
data:{
va:'隐藏',
see:true
},
methods:{
fun:function(){
//第一种方法
if (this.see){
this.see=false
}else {
this.see=true
}
//第二种方法
//this.see=!this.see
}
}
})
</script>
四、v-if、v-else、v-else-if控制元素的显示与隐藏
同样是控制元素的显示与隐藏，但与v-show不同的是，v-if、v-else、v-else-if是使用visibity:hidden；它直接把元素从Dom中删除。下面会讲到display:none与visibity:hidden的区别
<div id="itany">
<p v-if="num==0">00000000</p>
<p v-else-if="num==1">111111111</p>
<p v-else-if="num==2">22222222</p>
<p v-else-if="num==3">3333333</p>
<p v-else-if="num==4">44444444</p>
<p v-else="num==5">555555</p>
</div>
//v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。
//v-else-if也同样必须紧跟在带 v-if 或者 v-else-if 的元素之后
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#itany',
data:{
num:Math.fooor(Math.random()*(5-0+1)+0)//此处为随机数
//随机数公式为num:Math.floor(Math.random()*(max-min+1)+min)
}
})
</script>
display:none与visibility:hidden的区别：
display:none是将元素完全隐藏，并且元素不占用页面空间，所占空间会被其它元素占用，功能完全消失（不保留物理空间）
visibility:hidden是将元素隐藏，所占用空间不变，只是不显示元素，功能完全消失（保留物理空间）
五、v-bind 绑定属性
v-bind：属性名=“值”
<div id="itany">
<img v-bind:src="url" alt="" v-on:click="fun" v-bind:title="tit">
</div>
点击图片时更换一次图片
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#itany',
data:{
url:'image/avatar-dhg.png',
tit:'这是一张图片',
url1:'image/avatar-mdo.png'//更换一次
},
methods:{
fun:function(){
this.url=this.url1//更换一次
}
}
})
</script>
点击图片多次更换图片
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#itany',
data:{
url:'image/avatar-dhg.png'',
tit:'这是一张图片',
url1:'image/avatar-mdo.png'
see:true
},
methods:{
fun:function(){
if(this.see){
this.url='image/avatar-dhg.png''
this.see=false
}else{
this.url='image/avatar-mdo.png'
this.see=true
}
}
}
})
</script>
v-bind练习
Image 1.png
点击li的按钮更换图片
<div id="#itany">
<img v-bind:src="url">
<ul>
<li v-for="(value,index) in arr" v-on:click="fun(index)"><button>{{index+1}}</button</li>
</ul>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#itany",
data:{
arr:[1,2,3,4,5],
url:'images/pic1.jpg',
url1:["images/pic1.jpg","images/pic2.jpg","images/pic3.jpg","images/pic4.jpg","images/pic5.jpg"]
},
methods:{
fun:function(dex){
this.url=this.url1[dex]
}
}
})
</script>
网友评论