1、插值表达式：{{}}
- 将元素当成纯文本输出
<body>
<div id='app'>
<p>{{str}}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
str: 'Hello Vue'
},
})
</script>
</body>
2、v-html
- v-html会将元素当成HTML标签解析后输出
<body>
<div id='app'>
<div v-html='str'></div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
str: '<h1>Hello Vue</h1>'
},
})
</script>
</body>
输出：
Hello Vue
- 如果不写标签名，默认为div
3、v-txet
- v-text会将元素当成纯文本输出
<body>
<div id='app'>
<div v-text='str'></div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
str: '<h1>Hello Vue</h1>'
},
})
</script>
</body>
输出：
<h1>Hello Vue</h1>
总结
-
最常用的文本渲染方式是插值表达式，v-html和v-text很少用。
-
v-html后面可以用组件中的template模板代替，v-text可以用插值表达式代替。
-
插值表达式可以进行算术运算，字符串拼接，三元表达式
-
<body> <div id='app'> <p>{{`${str}，你好`}}</p> <p>{{num+10}}</p> <p>{{bool?0:1}}</p> </div> <script> var vm = new Vue({ el: '#app', data: { str: 'Hello Vue', num: 10, bool: false }, }) </script> </body>输出结果：
Hello Vue，你好 20 1
