1.v-model雙向數(shù)據(jù)綁定
v-model主要用于表單元素
<div id="itany">
<div>
<input type="text" v-model="name">//綁定span中的name
<span>你的名字是：{{name}}</span>
</div>
<br>
<div>
<input type="text" v-model="age">//綁定span中的age
<span>你的年齡是：{{age}}</span>
</div>
<br>
</div>
Vue.js部分
<script>
new Vue({
el:"#itany",
data:{
name:"",
age:""
}
})
</script>
2.v-on 點擊切換
v-on是用來綁定事件
methods:{}中是存放函數(shù)（方法）的台囱；
Vue中的方法想要用Vue中的屬性需要用到this；
<div id="itany">
<p>{{name}}</p>
<button v-on:click="fun1">點擊</button>
</div>
Vue.js部分
<script>
new Vue({
el:"#itany",
data:{
name:"路飛",
name2:"娜美"
},
methods:{
fun1:function(){
/*this.name= "索隆";*/ //第一種方法
this.name = this.name2; //第二種方法 點擊時將name2值賦給name1授滓；
console.log(this.name);
}
}
})
</script>
3.添加及刪除
<div id="iy">
<input v-model="a">
<button v-on:click="fun1">點擊添加</button>
<ul>
<li v-for="(val,index) in arr">{{val}}<button v-on:click="fun2(index)" >刪除</button></li>
</ul>
</div>
<script>
new Vue({
el:"#iy",
data:{
arr:["吃飯","睡覺","打豆豆"],
a:"" //定義一個空字符串將他綁定到input標簽上
},
methods:{
fun1:function(){
this.arr.push(this.a), //push給數(shù)組末尾添加新元素
this.a=""
},
fun2:function(ind){
this.arr.splice(ind,1); //splice從數(shù)組中刪除元素，第一個值是從哪刪除岸霹，第二個是刪除幾個
}
}
})
</script>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
