指令与事件
最常用的指令标签(标签的属性)它的前缀是v-
v-html
v-text
v-if:对dom节点是否显示,将节点添加和删除
在vue中插值表达式不可以以dom的属性赋值
v-bind:为节点属性赋值
v-on:给元素绑定事件使用,可以绑定所有原生事件
—onclick
—onkeyup
—onmouseover
—onmouseout
—v-on:keyup
<body>
<div id="app">
<img v-bind:src="imgurl" alt="" v-bind:title="asg">
<p v-if="show" v-bind:title="msg">这是一段文字</p>
<button v-on:click="domshow">显示隐藏</button>
</div>
<script>
const app =new Vue({
el:"#app",
data:{
show:true,
imgurl:"icon/1.png",
msg:"这是一段可以隐藏的文字",
asg:"这是一个英雄"
},
methods:{
domshow:function(){
this.show=!this.show
}
}
})
</script>
</body>
语法糖(代码简写)
v-bind/v-on
原写法:< p v-if=“show” v-bind:title=“msg”>这是一段文字< /p>
简写:< p v-if=“show” :title=“msg”>这是一段文字< /p>
原写法:< button v-on:click=“domshow”>显示隐藏< /button>
简写:< button @click=“domshow”>显示隐藏< /button>
2353
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
