一、V-model双向数据绑定
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)//此处为随机数
//随机数公式为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的区别：
display:none是将元素完全隐藏，并且元素不占用页面空间，所占空间会被其它元素占用，功能完全消失（不保留物理空间）
visibity:hidden是将元素隐藏，所占用空间不变，只是不显示元素，功能完全消失（保留物理空间）
