Vue中的插值操作及其他指令
- 插值操作
<body>
<div id="app">
<h2>{{message}}</h2>
<h3>{{message+' '+'李银河'}}</h3>//也可以做字符串的拼接
<h4>{{lastName+' '+firstName}}</h4>
<h5>{{lastName}} {{firstName}}</h5>
<h6>{{num*2}}</h6>//也可以做数学上的计算
</div>
<script>
const app = new Vue({
el: "#app",
data: {
message: "你好啊",
firstName: 'jisoo',
lastName: 'Kim',
num: 100
}
})
</script>
</body>
- v-once指令(该指令后面不需要跟任何表达式,表示元素和组件只渲染一次,不会随数据的改变而改变)
<body>
<div id="app">
<h2 v-once>{{message}}</h2>//控制台也改变不了
</div>
<script>
const app = new Vue({
el: "#app",
data: {
message: "你好啊"
}
})
</script>
</body>
- v-html(以HTML的方式解析字符串,如果字符串里面含有HTML标签需要解析,可以使用此方法)
<body>
<div id="app">
<h1 v-html='url'>{{url}}</h1>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
url: '<a href="http://www.baidu.com">百度一下</a>',
}
})
</script>
</body>
4. v-text(接受一个字符串类型,与{{}}方法大致一样,但是不够灵活,使用场景较少)
<body>
<div id="app">
<h2 v-text='text'></h2>//与<h2>{{message}}</h2>结果相同
</div>
<script>
const app = new Vue({
el: "#app",
data: {
text: 'haha',
message: 'haha'
}
})
</script>
</body>