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>