1.v-text指令
- v-text的作用:设置标签内容(textContent)
- 默认写法替换全部内容,差值表达式{{}}替换指定内容
<div id="app">
<h2 v-text="message+'222'"></h2>
<h2 v-text="info"></h2>
<h2>{{message+'1'}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
message:"hello vue!",
info:"前端"
}
})
</script>
页面显示内容:
2.v-html指令
- v-html作用:设置元素的innerHTML
- 内容中有HTML结构会被解析为标签
<div id="app">
<h2 v-html="content"></h2>
<h2 v-text="content"></h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
content:"<a href='http://www.baidu.com'>百度</a>"
}
})
</script>
页面显示内容:
3.v-on
- v-on作用:为元素绑定事件
- “v-on:”可以用“@”替代
- 绑定的方法定义在methods属性中
- 方法内部通过this访问data中的数据
<div id="app">
<input type="button" value="点击" @click="doIt" >
<input type="button" value="双击" @dblclick="doIt">
<h2 @click="changeFood">{{food}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
food:"西蓝花"
},
methods:{
doIt:function(){
alert("做IT");
},
changeFood:function(){
//console.log(this.food);
this.food+="好好吃!"
}
}
})
</script>
4案例:计数器
<div id="app">
<button @click="sub">-</button>
<span>{{num}}</span>
<button @click="add">+</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
num:1
},
methods:{
sub:function(){
if(this.num==0){
alert("不能再小了");
}else{
this.num--;
}
},
add:function(){
if(this.num==10){
alert("不能再大了");
}else{
this.num++;
}
}
}
})
</script>