本文实例讲述了vue.js实现插入数值与表达式的方法。分享给大家供大家参考，具体如下：
vue.js在插入数值的时候有三种方式
1、插入纯文本
插入纯文本是最简单的方式，使用双大括号就能插入想要的值。
<span>{{ msg }}</span>mustache也可以在属性中使用
<div id="item-{{ id }}"></div>就能显示所需要显示的文本信息了。但是有时候，我们想要插入的html文本，这时候要怎么办呢？在插入html的时候有两种方式，一种是用三个大括号的形式，这种是在vue.js 1.x 版本时候使用较多，但是在vue.js 2.x 的时候，插入纯文本的时候开始使用v-html的形式。
2、插入html
<span>{{{ msg }}}</span> // vue.js 1.x 版本<div v-html="msg"></div> // vue.js 2.x版本被插入的内容都会被当做 HTML ―― 数据绑定会被忽略。注意，你不能使用 v-html 来复合局部模板，因为 Vue 不是基于字符串的模板引擎。组件更适合担任 UI 重用与复合的基本单元。此外不建议将用户输入的值直接作为html显示，这样有可能会造成XSS攻击。对用用户输入显示的值一定要做必要的过滤之后才能真正显示。
3、属性
对于双大括号，不能在html属性中使用，对于属性，使用v-bind 来绑定数据。
<div v-bind:id="dynamicId"></div><div :id="dynamicId"></div> // 简写形式
附：vue.js插值与表达式示例
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <!-- Vue.js --> <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script></head><body><div id="app"> <!--# 使用大括号(Mustache 语法) “{{ }}”是最基本的文本插值方法，它会自动将我们双向绑定的诗句实时显示出来 #--> {{ book }}</div></body></html><script> var myData = { book:'《vue.js实战》' }; var app = new Vue({ el:'#app', data:myData })</script>希望本文所述对大家vue.js程序设计有所帮助。
新闻热点
疑难解答
