vue的基础指令
- v-text==>相当于innerText
<h1 v-text="msg"></h1> //msg是变量 - v-html ==>相当于innerHTML
<h1 v-html="name"></h1> - v-pre 使当前节点跳过预编译 {{}}在vue中是关键字,这里就没有编译直接显示在桌面
<h1 v-pre>{{msg1}}</h1> - 在data数据加载完成时节点的v-cloak属性会被删除,可以解决闪烁问题
<div v-cloak>{{msg2}}</div>
<div id="app">{{name}}已经{{age}}岁了</div>
<script>
var vm = new Vue({
// 选择元素
el: "#app",
data: {
name: "sehun",
age: 18
}
})
</script>
<style>
[v-cloak]{
display: none;
}
</style>
<div id="app1">
<!-- v-text==>相当于innerText -->
<h1 v-text="msg"></h1>
<!-- v-html ==>相当于innerHTML -->
<h1 v-html="name"></h1>
<!-- v-pre 使当前节点跳过预编译 {{}}在vue中是关键字,这里就没有编译直接显示在桌面-->
<h1 v-pre>{{msg1}}</h1>
<!-- 在data数据加载完成时节点的v-cloak属性会被删除,可以解决闪烁问题 -->
<div v-cloak>{{msg2}}</div>
</div>
<script>
var vm1 = new Vue({
el: "#app1",
data: {
name: "lay",
msg:"perfect",
msg1:"cute",
msg2:"sheep"
}
})
</script>