1,v-text指令
<div id='app'>
<h2 v-text="message+'???'"></h2>
<h2 v-text="info"></h2>
<h2>{{message+'??'}}江苏</h2>
</div>
<script>
Vue.config.productionTip = false //阻止vue在启动时生成生产提示。
var app = new Vue({
el:'#app',
data:{
message:'v-text测试',
info:'前端与移动部',
}
})
</script>
2,v-html指令
<div id='app'>
<h2 v-html="message"></h2>
<h2 v-text="info"></h2>
</div>
<script>
Vue.config.productionTip = false //阻止vue在启动时生成生产提示。
var app = new Vue({
el:'#app',
data:{
message:'<a href="http://www.baidu.com">百度</a>',
info:'<a href="http://www.baidu.com">百度</a>',
}
})
</script>
3,v-on指令
为元素绑定时间
<div id='app'>
<input type="button" value="v-on指令" v-on:click="doit">
<input type="button" value="v-onmonseenter指令" v-on:monseenter="doit">
<input type="button" value="v-on双击指令" v-on:dblclick="doit">
<input type="button" value="v-on简写指令" @dblclick="doit">
<h2 @click="changeFood">{{food}}</h2>
</div>
<script>
Vue.config.productionTip = false //阻止vue在启动时生成生产提示。
var app = new Vue({
el:'#app',
data:{
food:'番茄炒蛋'
},
methods: {
doit:function(){
alert('我出现了')
} ,
changeFood:function(){
this.food+='好吃!!'
}
},
})
</script>
标签:el,vue,false,第二课,标签,app,Vue,message From: https://www.cnblogs.com/superip/p/17286014.html