数据绑定指令

(1)单向数据绑定

使用v-bind可以单向绑定值，将其用于标签属性中。下面代码的效果是，鼠标放置在在浏览器显示的“我是标题”上，将会显示"页面加载时间:xxxx".

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- 使用v-bind单向绑定值，将其用于标签属性中 -->
        <h1 v-bind:title="message">
            <!-- 使用插值表达式获取值，将其显示在内容中 -->
            {{content}}
        </h1>
        
        <!-- 简写 -->
        <h2 :title="message">
            <!-- 使用插值表达式获取值，将其显示在内容中 -->
            {{content}}
        </h2>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                content:"我是标题",
                message:"页面加载时间:" + new Date().toLocaleString 
            }
        })
    </script>
</body>

</html>

(2)双向数据绑定

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- value是文本框中的默认值，单向绑定，只是读到searchMap的值 -->
        <input type="text" v-bind:value="searchMap">
        <!-- 双向绑定，读，写，值发生改变则其他绑定了searchMap的值也发生改变 -->
        <input type="text" v-model="searchMap">
        <p>{{searchMap}}</p>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                searchMap:"520"
            }
        })
    </script>
</body>

</html>

谷粒学院项目实战45——单向数据绑定与双向数据绑定

数据绑定指令