当前阅读教程:Vue.JS入门教程 > 数据绑定-文本插值 | |
阅读(22555525) 收藏 赞(5685) 分享 | |
上一篇: Vue.js 数据绑定 | 下一篇: 数据绑定 v-html指令 |
Vue.js里面的数据绑定,可以理解为属性内容的显示,属性的内容在Vue.js中data里面定义,通过数据绑定形式显示在页面。 对于做程序开发的人员来讲,这里data里面定义的属性,我们可以理解为变量。 数据绑定最常见的形式就是使用 {{属性名}}的文本插值,这里“属性名”左边和右边是双大括号。{{…}}中填写的就是我们在Vue.js中data定义的属性名。我们在微信小程序中也是使用该语法。 这种方式只能显示不带HTML代码的属性值,可以理解为双大括号的数据绑定写法{{ }}会被VUE当成纯文本输出,如果如要解析带HTML内容的属性,请使用下面小节所讲的v-html指令。 示例代码:如何使用{{}}(左右双大括号)来显示属性值<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>模板语法-数据绑定-文本插值</title> <!--加载本地vue.js的框架--> <script src="vue2.2.2.min.js"></script> </head> <body> <!--定义div区块的id的值,这里定义的值为"app",后面vue会使用该值--> <div id="app"> <!--显示属性(变量)message:“Hello Vue.js!'”--> <p>{{ message }}</p> </div> <script> new Vue({ el: '#app',//app为前面div区块的id的值,通过"#"号绑定 //data区域定义属性的值 data: { message: '黄菊华老师,Hello Vue.js!' //定义属性message的值 } }) </script> </body> </html> 效果图 |
|
上一篇: Vue.js 数据绑定 | 下一篇: 数据绑定 v-html指令 |