一潮针，v-model
v-model:雙向數(shù)據(jù)綁定 用于表單元素
<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：事件名="函數(shù)名"
實(shí)現(xiàn)文字的單項(xiàng)切換
1）
<div class="box">
<input type="text" v-model="msg"/>
<p>{{msg}}<p>
<button v-on:click="alt">點(diǎn)擊</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相當(dāng)于用display：none;來(lái)隱藏
css <style> .header{ width: 100px; height: 100px; border: 2px solid #000; background: blue; } </style>html
<div class="box">
<button v-on:click="hide">點(diǎn)擊</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">點(diǎn)擊</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>
