vue中的数据绑定

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>

界面效果:

1.jpg

原生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>

界面效果:

2.jpg

可以看到模板中<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>

界面效果:

3.jpg

可以看到,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前端开发知识,请查阅 HTML中文网 !!

以上就是vue中的数据绑定的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » Vue.js 教程

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏