Vue
v-text
:设置标签的内容(textContent)
<div id="app">
<h2 v-text="message"></h2>
//默认写法会替换全部内容。
<h1>北京{{message}}</h1>
差值表达式{{}}可以替换指定内容。
</div>
<script>
var app = new Vue({
el:"#app",
data:{
message:"你好!"
}
})
</script>
<div id="app">
<p v-html="content"></p>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
content:"<a href='http://www.baidu.com'>百度</a>"
}
})
</script>
<div id="app">
<input type="button" value="v-on指令" v-on:click="doIt()" /> //事件名不需要写On
<input type="button" value="v-on简写" @click="doIt()" /> //指令可以简写为@
<h2 @click="changeFood()">{{ food }}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var app = new Vue({
el: "#app",
data:{
food:"西红柿炒蛋"
},
methods: { //绑定的方法定义在methods属性中
doIt: function() {
alert("做It");
},
changeFood:function(){
this.food+="好好吃!" //方法内部通过 this 关键字可以访问定义在 data 中数据
}
},
})
</script>