一盗蟆、Vue指令：
- v-on指令:主要用來監(jiān)聽dom事件妇蛀，以便執(zhí)行一些代碼塊主届。表達(dá)式可以是一個(gè)方法名寿羞。簡寫為：@
例子：分別點(diǎn)擊“隱藏/顯示”按鈕可以切換內(nèi)容的顯示
<div id="app">
<h2 v-if="show">{{name}}</h2>
<button type="button" v-on:click= "handleClick">隱藏/顯示</button>
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
name:'軟件1721',
show: true
},
methods: {
handleClick: function(){
//把當(dāng)前show屬性的值取反
if(this.show===true){
this.show=false;
}else{
this.show=true;
}
}
}
})
</script>
效果如下:
顯示
隱藏
- v-model:這個(gè)指令用于在表單上創(chuàng)建雙向數(shù)據(jù)綁定济似。v-model會(huì)忽略所有表單元素的value矫废、checked、selected特性的初始值砰蠢。因?yàn)樗x擇Vue實(shí)例數(shù)據(jù)做為具體的值蓖扑。
<div id="app">
<form>
<input type="text" v-model="text" />
<button type="button" value="提交" v-on:click="handleClick">提交</button>
</form>
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
text:''
},
methods: {
handleClick: function(){
alert("輸出的值為："+this.text);
}
}
})
</script>
效果如下：
- v-if:實(shí)現(xiàn)條件渲染，Vue會(huì)根據(jù)表達(dá)式的值的真假條件來渲染元素
<div id="app">
<p v-if="num===1">Jay</p>
<p v-else-if="num===2">Chou</p>
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
num:1
}
})
</script>
當(dāng)num=1時(shí)台舱，顯示Jay律杠，當(dāng)num=2時(shí)，顯示Chou
- v-show:也是用于根據(jù)條件展示元素竞惋。和v-if不同的是柜去，如果v-if的值是false，則這個(gè)元素被銷毀拆宛，不在dom中嗓奢。但是v-show的元素會(huì)始終被渲染并保存在dom中，它只是簡單的切換css的dispaly屬性
<div id="app">
<p v-show="show1">當(dāng)點(diǎn)擊時(shí)顯示此行</p>
<button @click="show" type="button">點(diǎn)擊</button>
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
show1:false
},
methods:{
show:function(show1){
this.show1=true;
}
}
})
</script>
當(dāng)點(diǎn)擊按鈕時(shí)浑厚，顯示p標(biāo)簽
