1.v-model:双向数据绑定 用于表单元素
格式：v-model = " "
<div class="demo">
<p>{{mes}}</p>
<input v-model="mes">
</div>
var app1 = new Vue({
el: '.demo',
data: {
message: 'hello vue!'
}
})
2.v-on：指令添加一个事件监听器（绑定一个事件）
格式：v-on:事件名 = "函数名" （简写：@事件名=“函数名”）
<div class="demo">
<p>{{msgs}}</p>
<button v-on:click='btnb'>按钮</button>
</div>
<script src="vue/dist/vue.js"></script>
<script>
var vm=new Vue({
el:'.demo',
data:{
msg:'hello',
flag:true
},
methods: {
btnb: function () {
this.msg = this.msgs
if(this.flag){
this.msgs='hello vue'
this.flag=false
}else{
this.msgs='hello word'
this.flag=true
}
}
}
})
</script>
3.v-bind：绑定属性
格式：v-bind:属性名=“函数名” （简写：:属性名=“函数名”）
<div class="demo">
<p v-on:click='btnp'><img v-bind:src="url" alt=""></p>
</div>
<script src="vue/dist/vue.js"></script>
<script>
new Vue({
el:'.demo',
data:{
url:'images/1.jpg',
flag:true,
},
methods: {
btnp: function () {
this.url = this.flag
if(this.flag){
this.url='images/2.jpg'
this.flag=false
}else{
this.url='images/1.jpg'
this.flag=true
}
}
}
})
</script>
4.v-show 控制元素的隐藏和显示
格式：v-bind=" "
<div class="demo">
<h1>{{msgs}}</h1>
<h3 v-show='!alt'>{{msgs}}</h3>
</div>
<script src="vue/dist/vue.js"></script>
<script>
new Vue({
el:'.demo',
data:{
msgs:'oooo',
alt:true
}
})
</script>
注：使用display：none隐藏
5.v-if、v-else、v-else-if
<div class="demo">
<div v-if='num==0'>00000000000</div>
<div v-else-if='num==1'>1111111111</div>
<div v-else-if='num==2'>22222222</div>
<div v-else='num==5'>555555555555</div>
</div>
<script src="vue/dist/vue.js"></script>
<script>
new Vue({
el:'.demo',
data:{
num:Math.floor(Math.random()*(5-0+1)+0)
}
})
</script>
