一，v-model
v-model:双向数据绑定 用于表单元素
<div class="box">
<input type="text" v-model="msg"/>
<p>{{msg}}<p>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:".box",
data:{
msg:"hello word"
}
})
</script>
二，v-on：绑定事件
v-on：事件名="函数名"
实现文字的单项切换
1）
<div class="box">
<input type="text" v-model="msg"/>
<p>{{msg}}<p>
<button v-on:click="alt">点击</button>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:".box",
data:{
msg:"hello word"
},
methods:{
alt:function(){
this.msg="hello vue"
}
}
})
</script>
三，v-bind绑定属性
v-bind:属性名
图片切换
<div class="box">
<img v-bind:src="url">
<ul>
<li v-for="(value,index) in arr" v-on:click="add(index)">{{index+1}}</li>
</ul>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:".box",
data:{
arr:["img/1-8-2.jpg","img/jc1209011_7.jpg","img/jc1209011_5a.jpg,. "],
url:"img/1-8-2.jpg"
},
methods:{
add:function(i){
this.url=this.arr[i]
}
}
})
</script>
四，v-show控制元素的显示和隐藏
使用v-show相当于用display：none;来隐藏
css <style> .header{ width: 100px; height: 100px; border: 2px solid #000; background: blue; } </style>html
<div class="box">
<button v-on:click="hide">点击</button>
<div class="header" v-show="ok"></div>
</div>
``js
<script src="js/vue.js"></script>
<script>
new Vue({
el:".box",
data:{
ok:true
},
methods:{
hide:function(){
if(this.ok){
this.ok=false
}else{
this.ok=true
}
}
}
})
</script>
五，v-if控制元素的显示和隐藏
使用v-if与在css中用visibility：hidden;相同
css <style> .header{ width: 100px; height: 100px; border: 2px solid #000; background: blue; } </style>html
<div class="box">
<button v-on:click="hide">点击</button>
<div class="header" v-if="ok"></div>
</div>
``js
<script src="js/vue.js"></script>
<script>
new Vue({
el:".box",
data:{
ok:true
},
methods:{
hide:function(){
if(this.ok){
this.ok=false
}else{
this.ok=true
}
}
}
})
</script>
