1.3 Vue属性绑定和双向数据绑定

Posted 2021-01-22 torey

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了1.3 Vue属性绑定和双向数据绑定相关的知识，希望对你有一定的参考价值。

Vue属性绑定和双向数据绑定

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>属性绑定和双向数据绑定</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <!--根据慕课网DellLee老师讲解的vue2.5入门课程笔记，视频地址： https://www.imooc.com/learn/980-->
        <div title="this is hello world">hello world</div>
    </div>
    <div id="app1">
        <!--1 属性绑定：v-bind-->
        <!--1.1 属性绑定： v-bind代表 当前这个属性与谁绑定，是与titleData数据项绑定，一旦使用v-bind则属性值代表的是js表达式v-bind可以缩写为:-->
        <div v-bind:title="‘一旦用v-bind,这里是JS表达式‘+titleData">hello world</div>
    </div>
    <div id="app2">
        <!--1.2 属性绑定  v-bind可以缩写为: -->
        <div :title="titleData">hello world</div>
    </div>
    <div id="app3">
        <!--2 双向数据绑定:v-model -->
        <!--双向数据绑定是指：当页面中的内容发生改变，则Vue实例中的数据也发生改变-->
        <div :title="titleData">hello world</div>
        <input v-model="context" />
        <div >
            {{context}}
        </div>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                title: "this is hello world"
            }
        });
        var app1 = new Vue({
            el: "#app1",
            data: {

                titleData: "this is hello wordss"
            }
        });
        var app2 = new Vue({
            el: "#app2",
            data: {
                titleData: "ddssss"
            }
        });
        var app3 = new Vue({
            el: "#app3",
            data: {
                titleData: "",
                context:"this is context"
            }
        });
    </script>
</body>
</html>

以上是关于1.3 Vue属性绑定和双向数据绑定的主要内容，如果未能解决你的问题，请参考以下文章