属性绑定与双向数据绑定

最新推荐文章于 2025-09-05 11:22:47 发布

转载最新推荐文章于 2025-09-05 11:22:47 发布 · 155 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wangjiayi/p/10280658.html

文章标签：

#javascript #ViewUI

本文介绍了Vue.js中属性绑定和双向数据绑定的基本用法。通过示例代码展示了如何使用v-bind进行属性绑定，以及使用v-model实现输入框与数据的双向绑定。这有助于开发者更好地理解和应用Vue.js的数据绑定特性。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>属性绑定和双向数据绑定</title>
        <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    </head>
    <body>
        <div id="root">
            <!--属性绑定-->
            <div v-bind:title="'hahahaha~' + title">王家逸</div>
            <div :title="'hahahaha~' + title">王家逸</div>

            <!--双向数据绑定-->
            <input v-model="content" />
            <div>{{content}}</div>
        </div>
        <script>
            new Vue({
                el:"#root",
                data:{
                    title:"this is jiayiwong~",
                    content:"this is content~"
                }
            })
        </script>
    </body>
</html>