原生怎样把数据绑定到html,vue中的数据绑定

Vue框架很核心的功能就是双向的数据绑定。双向是指：HTML标签数据绑定到Vue对象，另外反方向数据也是绑定的，本文通过实例来为大家介绍一下vue中的数据绑定。

示例代码：

vue模板中的数据绑定语法

{{msg}}

var vm = new Vue({

el: '#box',

data:{

msg:'我是一段包含html片段的字符hello'

}

});

界面效果：

原生html

上面的文本数据绑定，当文本中包含html片段时，html片段已字符串的形式原封不动的展示到了模板中。不会将文本中的html片段解析出来。而vue的v-html指令，就可以将html片段进行解析。

基本语法：

示例：

vue模板中的数据绑定语法

var vm = new Vue({

el: '#box',

data:{

msg:'我是一段包含html片段的字符hello',

}

});

界面效果：

可以看到模板中

这种写法，vue会将msg中的html字符解析成DOM节点，并且将msg解析后完整的内容插入到h1元素中。

备注：

1、当我们改变msg的值后，v-html绑定的值在模板中也会同步更新。

2、可以在构造函数外部加入下面的js代码去验证，两秒后页面上原本的内容会变成"我是新的msg"。setTimeout(function(){

vm.$data.msg = '我是新的msg';

},2000);

将数据绑定到元素的属性上

将数据绑定到元素的属性上也是需要结合vue的v-bind指令才能实现。

基本语法

示例：

vue模板中的数据绑定语法

我是一段文字

var vm = new Vue({

el:'#box',

data: {

desc:'text'

}

})

界面效果：

可以看到，data中desc的值已经成功的设置为元素的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前端开发知识，请查阅 HTML中文网 ！！