文章目录
- 一、插值表达式
- 二、v-text 中不是字符串而是js表达式
- 三、v-html
- 四、js表达式，可以和字符串拼接
- 五、源码链接
一、插值表达式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue模板语法</title><!--引入vue.js库--><script src="../vue.js"></script>
</head><body>
<div id="root">{{content}}</div><script>var vm = new Vue({el: '#root',template: "<div>{{content}}</div>",data: {content: 'hello world'}});
</script>
</body>
</html>二、v-text 中不是字符串而是js表达式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue模板语法</title><!--引入vue.js库--><script src="../vue.js"></script>
</head><body>
<div id="root"><div v-text="content"></div>
</div><script>var vm = new Vue({el: '#root',template: "<div>{{content}}</div>",data: {content: 'hello world'}});
</script>
</body>
</html>三、v-html
不是字符串而是js表达值，在当内容是一个字符串时v-html和v-text、插值表达式效果一样，当显示的内容是html时，v-html解析html，显示html标签中的内容而不显示标签，v-text、插值表达式这两种则会全部显示，不解析！
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue模板语法</title><!--引入vue.js库--><script src="../vue.js"></script>
</head><body>
<div id="root"><div v-text="content"></div><div v-html="content"></div>
</div><script>var vm = new Vue({el: '#root',data: {content: '<div>hello world</div>'}});
</script>
</body>
</html>四、js表达式，可以和字符串拼接
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue模板语法</title><!--引入vue.js库--><script src="../vue.js"></script>
</head><body>
<div id="root">{{content + ' ly'}}<div v-text="content + ' ly'"></div><div v-html="content + ' ly'"></div>
</div><script>var vm = new Vue({el: '#root',data: {content: 'hello'}});
</script>
</body>
</html>
)
