vue 框架很核心的功能就是双向的数据绑定. 双向是指: html 标签数据绑定到 Vue 对象, 另外反方向数据也是绑定的, 本文通过实例来为大家介绍一下 vue 中的数据绑定.
示例代码:
<!-- index.html -->
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="utf-8">
- <title>
- vue 模板中的数据绑定语法
- </title>
- <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
- </script>
- </head>
- <body>
- <div id="box">
- <h1>
- {{msg}}
- </h1>
- </div>
- <script type="text/javascript">
- var vm = new Vue({
- el: '#box',
- data: {
- msg: '我是一段包含 html 片段的字符 < span>hello</span>'
- }
- });
- </script>
- </body>
- </HTML>
界面效果:
原生 HTML
上面的文本数据绑定, 当文本中包含 HTML 片段时, HTML 片段已字符串的形式原封不动的展示到了模板中. 不会将文本中的 HTML 片段解析出来. 而 vue 的 v-HTML 指令, 就可以将 HTML 片段进行解析.
基本语法:
<tag v-HTML='data 中的属性'></tag>
示例:
<!-- index.html -->
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="utf-8">
- <title>
- vue 模板中的数据绑定语法
- </title>
- <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
- </script>
- </head>
- <body>
- <div id="box">
- <h1 v-HTML='msg'>
- </h1>
- </div>
- <script type="text/javascript">
- var vm = new Vue({
- el: '#box',
- data: {
- msg: '我是一段包含 html 片段的字符 < span>hello</span>',
- }
- });
- </script>
- </body>
- </HTML>
界面效果:
可以看到模板中 < h1 v-HTML='msg'></h1> 这种写法, vue 会将 msg 中的 HTML 字符解析成 DOM 节点, 并且将 msg 解析后完整的内容插入到 h1 元素中.
备注:
1, 当我们改变 msg 的值后, v-HTML 绑定的值在模板中也会同步更新.
2, 可以在构造函数外部加入下面的 JS 代码去验证, 两秒后页面上原本的内容会变成 "我是新的 msg".
- setTimeout(function(){
- vm.$data.msg = '我是新的 msg';
- },2000);
将数据绑定到元素的属性上
将数据绑定到元素的属性上也是需要结合 vue 的 v-bind 指令才能实现.
基本语法
<tag v-bind: 属性名 ='data 中的属性'></tag>
示例:
<!-- index.html -->
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="utf-8">
- <title>
- vue 模板中的数据绑定语法
- </title>
- <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
- </script>
- </head>
- <body>
- <!-- v-bind -->
- <div id="box">
- <span v-bind:id='desc'>
- 我是一段文字
- </span>
- </div>
- <script type="text/javascript">
- var vm = new Vue({
- el: '#box',
- data: {
- desc: 'text'
- }
- })
- </script>
- </body>
- </HTML>
界面效果:
可以看到, data 中 desc 的值已经成功的设置为 < span > 元素的 id 属性上.
备注:
1, 当我们改变 desc 的值后, v-bind 绑定的值在模板中也会同步更新.
2, 可以在构造函数外部加入下面的 JS 代码去验证, 两秒后查看 span 元素的 id 会变成 new-text.
- setTimeout(function(){
- vm.$data.desc = 'new-text';
- },2000);
总结
1, 使用双花括号可以将数据以文本的形式绑定到模板中. 数据更新模板同步更新
2, 使用 v-HTML 指令绑定数据时, 可以将数据中的 HTML 片段解析为 DOM 节点. 同样数据更新, 模板同步更新.
3, 使用 v-bind 可以将数据绑到元素的属性上. 同样数据更新, 模板同步更新.
更多 web 前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/web/vue-js/18030.html