Vue指令02——v-on指令和v-show的使用
Vue指令02——v-on指令和v-show的使用
v-on指令
格式1：v-on:事件=」方法「
格式2：@事件=」方法「
格式3：@事件=」方法（參數1，參數2）「 //把參數傳到到方法中
格式4：@鍵盤事件 . 鍵盤的鍵名稱=」方法「 //按下指定鍵才觸發
作用：為元素綁定事件
v-on的實例（格式1-格式2）
效果：滑鼠單擊小明，增加」小妹「，滑鼠移入div，出現彈窗。
<div id="app">
<!--滑鼠移入事件，調用greens方法-->
<div style="background-color:bisque; width:100px; height:100px" v-on:mouseover="greens">第一個div</div>
<!---滑鼠單擊事件，調用changeName方法-->
<h2 @click="changeName">{{name}}</h2>
<div>
<script>
var ap1=new Vue({
el:"#app", //獲取id為app的元素和它的子元素
data:{ //寫數據的地方
name:"小明"
} ,
methods:{ //寫方法的地方
greens:function(){ //彈窗方法
alert("滑鼠移入的div")
},
changeName:function(){ //增加小妹的方法
this.name+="小妹"
}
}
})
</script>
v-on的實例（格式3-格式4）
效果：單擊按鈕把事件里的參數傳到到方法中輸出，在文本框里輸入東西，只有按下回車鍵才彈出彈窗。
<div id="acc">
<button @click="ts('小明',6666)">按鈕</button>
<input type="text" @keyup.Enter="rm">
</div>
<script>
var info=new Vue({
el:"#acc",
data:{
},
methods:{
ts:function(p1,p2){
console.log(p1);
console.log(p2)
},
rm:function(){
alert("ddddddddd")
}
}
})
</script>
v-show命令
作用：顯示或隱藏元素
格式：v-show=”邏輯表達式” //false或者true
v-show的實例
效果：單擊按鈕div隱藏或顯示
<div id="app">
<!---調用cs方法v-show取反為false，div隱藏-->
<div style="background-color:bisque; width:100px; height:100px" v-show="a">單擊按鈕我隱藏</div>
<button @click="cs">按鈕</button>
<div>
<script>
var ap1=new Vue({
el:"#app", //獲取id為app的元素和它的子元素 data:{
data:{
a:true //給變數付初值
},
methods:{ //寫方法的地方
cs:function(){
this.a=!this.a //取反
}
}
})
</script>
