一，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>
2）
<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>
var vm=new Vue({
el:".box",
data:{
msg:"hello word"
},
methods:{
alt:function(){
vm.msg="hello vue"
}
}
})
</script>
實(shí)現(xiàn)文字的雙向切換
方法一
1）
<div class="box">
<input type="text" v-model="msg"/>
<p>{{msg}}<p>
<button v-on:click="alt">上一張</button>
<button v-on.click="abg">下一張</button>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:".box",
data:{
msg:"hello word"
},
methods:{
alt:function(){
this.msg="hello vue"
}，
abg:function(){
this.msg="hello word"
}
}
})
</script>
2）
<div class="box">
<input type="text" v-model="msg"/>
<p>{{msg}}<p>
<button v-on:click="alt">上一張</button>
<button v-on.click="abg">下一張</button>
</div>
<script src="js/vue.js"></script>
<script>
var vm=new Vue({
el:".box",
data:{
msg:"hello word"
},
methods:{
alt:function(){
vm.msg="hello vue"
},
abg:function(){
vm.msg="hello word"
}
}
})
</script>
方法二
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",
flag:true
},
methods:{
alt:function(){
if(this.flag){
this.msg="hello vue",
this.flag=flase
}else{
this.msg="hello word"
this.flag=flase
}
}
}
})
</script>
2）
<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>
var vm=new Vue({
el:".box",
data:{
msg:"hello word",
flag:true
},
methods:{
alt:function(){
if(this.flag){
vm.msg="hello vue",
vm.flag=flase
}else{
vm.msg="hello word"
vm.flag=flase
}
}
}
})
</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;來隱藏
``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>
六.使用vue制作的選項(xiàng)卡
new Vue({
el:"#itany",
data:{
card:[
{title:'選項(xiàng)卡1',content:'11111111111111111',flag:true},
{title:'選項(xiàng)卡2',content:'22222222222222222',flag:false},
{title:'選項(xiàng)卡3',content:'33333333333333333',flag:false}
]
},
methods:{
chg:function(ind){
for(var i=0;i<this.card.length;i++){
this.card[i].flag=false;
}
this.card[ind].flag=true;
}
}
})
</script>
display:none;與visiblity:hidden;的區(qū)別
相同：
1、兩者都能隱藏元素。
不同：
display:none 不占頁(yè)面空間，visiblity:hidden 占據(jù)原先頁(yè)面空間。
這里必須說明的是，元素不占頁(yè)面空間后，取該元素或其內(nèi)部元素的寬高值永遠(yuǎn)是0。如果想隱藏又想取到寬高值，那就得用visiblity:hidden。
