本文详细介绍了Vue中的v-text和v-html指令，v-text用于设置元素的纯文本内容，而v-html则解析并插入HTML结构。在示例中展示了如何使用这两个指令以及它们的区别。此外，还讲解了v-on或@简写的事件绑定，包括点击事件的触发和方法的调用，展示了如何通过this关键字访问data中的属性并进行修改。
v-text：设置标签的内容；
默认写法会替换全部内容，使用差值表达式{{}}可以替换指定内容；
内部支持写表达式
v-html:设置元素的innerHTML
内容中有HTML结构会被解析为标签
v-text指令无论什么内容之后解析为文本
解析文本使用v-text，解析html结构使用v-html
<div id="app">
<p v-html="contant"></p>
<p v-text="contant"></p>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
contant:"<a href='http://www.baidu.com'>百度</a>"
}
})
</script>
v-on:为元素绑定事件
事件名不需要写on
指令可以简写为@
绑定的方法定义在methods属性中
方法内部通过this关键字可以访问定义在data中数据
<body>
<div id="app">
<input type="button" value="v-on指令" v-on:click="do1">
<input type="button" value="v-on简写" @click="do1">
<input type="button" value="双击事件" @dblclick="do1">
<h2 @click="changeFood">{{food}}</h2>
</div>
<script>
var app = new Vue ({
el:"#app",
data:{
food:"西红柿炒鸡蛋"
},
methods:{
do1:function(){
alert("做个示范");
},
changeFood:function(){
// console.log(this.food);
this.food+="好吃"
}
},
})
</script>
</body>
494
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
