一树灶、V-model雙向數(shù)據(jù)綁定
1.用于表單元素
html：
<div id="itany">
<input type="text" v-model="msg"/>
<h1>{{msg}}</h1>
</div>
js：
new Vue({
el:'#itany',
data:{
msg:'hello Vue'
}
})
二到旦、V-on
click
html：
<div id="itany">
<button v-on:click="alt">按鈕</button>
</div>
js：
new Vue({
el:'#itany',
methods:{
alt:function(){
alert("Vue")
}
}
})
三、V-show
顯示/隱藏
HTML：
<div id="itany">
<button v-on:click="chg">隱藏</button>
<div v-show="see" class="qq"></div>
</div>
js：
new Vue({
el:'#itany',
data:{
see:true,
arr:[true,false]
},
methods:{
chg:function(){
if(this.see){
this.see=false
}else{
this.see=true
}
// this.see=!this.see
}
}
})
四淤毛、V-if
<div id="app">
<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>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js">
<script>
new Vue({
el:'#app',
data:{
num:Math.fooor(Math.random()*(5-0+1)+0)//此處為隨機數(shù)
//隨機數(shù)公式為num:Math.floor(Math.random()*(max-min+1)+min)
}
})
</script>
v-if控制元素的顯示與隱藏蒜胖，但與v-show不同的是消别，v-if、v-else台谢、v-else-if是使用visibity:hidden寻狂；v-if顯示隱藏是將dom元素整個添加或刪除
v-if,v-else,v-else-if 與原生js一樣
display:none與visibity:hidden的區(qū)別：
display:none是將元素完全隱藏，并且元素不占用頁面空間朋沮，所占空間會被其它元素占用蛇券，功能完全消失（不保留物理空間）
visibity:hidden是將元素隱藏，所占用空間不變樊拓，只是不顯示元素纠亚，功能完全消失（保留物理空間）
