一：v-model
v-model雙向數(shù)據(jù)綁定，用于表單元素
//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',//綁定一個(gè)元素，選擇器
data:{
mass:'asdf',
arr:1
},
})
</script>
二、v-on綁定事件
v-on：事件名=“函數(shù)名”
<div id="app">
{{mess}}
<button v-on:click="but">綁定事件</button>
</div>
點(diǎn)擊按鈕彈框
<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>
點(diǎn)擊按鈕更換文字
<script>
var app=new Vue({
el:'#app',
data:{
mess:'wwwww',
mass:'asdfa'
},
methods:{
but:function(){
/*this.mess='我是誰(shuí)'*/
this.mess=this.mass
}
}
})
</script>
三、v-show控制元素的現(xiàn)實(shí)與隱藏
v-show=“ ” 使用display：none隱藏
<div id="app">
<h1>{{mas}}</h1>
<h4 v-show="massage">{{mas}}</h4><!--asdf-->
<h4 v-show="!massage">{{mas}}</h4><!--后臺(tái)輸出fasle-->
</div>
<script src="js/vue.js"></script>//下載后的鏈接
<script>
new Vue({
el:'#app',
data:{
mas:"asdf",
massage:true
}
})
</script>
復(fù)習(xí)函數(shù)調(diào)用
&& 與：兩個(gè)條件都對(duì)則為對(duì)
|| 或：一個(gè)條件對(duì)則為對(duì)
<script>
var a=3;
var b=4;
console.log(a>4||b>4)
//true
</script>
！ 非：取反
<script>
console.log(!true);
//flase
</script>
練習(xí)v-show
Image 1.png
點(diǎn)擊隱藏按鈕把下面的div隱藏
代碼如下：
<div id="itany">
<button v-on:click="fun">轉(zhuǎn)換</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中刪除。下面會(huì)講到display:none與visibity:hidden的區(qū)別
<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 的元素的后面，否則它將不會(huì)被識(shí)別。
//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)//此處為隨機(jī)數(shù)
//隨機(jī)數(shù)公式為num:Math.floor(Math.random()*(max-min+1)+min)
}
})
</script>
display:none與visibility:hidden的區(qū)別：
display:none是將元素完全隱藏，并且元素不占用頁(yè)面空間，所占空間會(huì)被其它元素占用，功能完全消失（不保留物理空間）
visibility:hidden是將元素隱藏，所占用空間不變，只是不顯示元素，功能完全消失（保留物理空間）
五、v-bind 綁定屬性
v-bind：屬性名=“值”
<div id="itany">
<img v-bind:src="url" alt="" v-on:click="fun" v-bind:title="tit">
</div>
點(diǎn)擊圖片時(shí)更換一次圖片
<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>
點(diǎn)擊圖片多次更換圖片
<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練習(xí)
Image 1.png
點(diǎn)擊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>
