一、Vue指令
1、v-text:设置文本
要想实现(固定文字)+变量文字的方式,采用下面的形式
(1)
<h2>湖北{{message+'!'}}</h2>
(2)
<h2 v-text="message+'!'"></h2>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
info:"好好学习天天向上!"
}
})
</script>
2、v-html:设置标签的innerHTML
通过v-text和v-html的对比来解释v-html的功能
(1)代码
<div id="app">
<p v-text="content"></p>
<p v-html="content"></p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
//content: 'Hello Vue!',
content:"<a href='https://blog.csdn.net/m0_53522458?spm=1000.2115.3001.5343'>我的主页</a>"
}
})
</script>
(2)效果:使用v-text仅有文本,使用v-html可打开超链接
3、v-on:为元素绑定事件
(1)v-on指令的作用是为元素绑定事件
(2)事件名不需要写on
(3)指令可以简写为@
(4)绑定的方法定义在methods属性中
源代码:
<div id="app">
<input type="button" value="v-on指令" v-on:click="dolt">
<input type="button" value="v-on简写" @click="dolt">
<input type="button" value="双击事件" @dblclick="dolt">
<input type="button" value="事件绑定" v-on:dblclick="dolt">
<h2 @click="changeFood">{{food}}</h2>
</div>
<script>
var app = new Vue({
el: '#app',
data:{
food:"哈密瓜yyds!"
},
methods:{
dolt:function(){
alert("sjysz")
},
//逻辑
changeFood:function(){
// console.log(this.food);
this.food+="好好吃"
}
}
})
</script>
运行效果: