vue中属性绑定和双向绑定

一、属性绑定

    <div id="root">
        <div v-bind:title=" 'dear jin,' + title">hello world</div>
    </div>

    <script>
        new Vue({
            el: "#root",
            data: {
                title: 'this is hello world'
            },
            methods: {

            }
        })
    </script>

通过 v-bind:title = " " 实现title绑定，等号 后面" " 里面可用js的表达式。

v-bind:title 可缩写成 :title。

二、双向绑定

    <div id="root">
        <input type="text" v-model="content" />
        <div>{{content}}</div>
    </div>

    <script>
        new Vue({
            el: "#root",
            data: {
                content: "this is content"
            },
            methods: {

            }
        })
    </script>

v-model 为vue模板数据双向绑定指令。