怎样在 Vue 中使用 v-model 实现双向数据绑定?

时间：2019-08-28 13:37:08 阅读：94 评论：0 收藏：0 [点我收藏+]

1. 所谓 双向数据绑定, 可以理解为: 修改 A , B 会跟着被修改, 修改 B , A 会跟着被修改. 常用在需要进行用户输入的地方, 比如这些 html 标签: input、select、textarea、checkbox、radio 等.

2. 下面是一个输入内容, 反转字符串的 demo .

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  <title>Vue Test</title>
</head>
<body>
    <div id="app">
        <input type="text" v-model="message" />
        <p>{{ message.split(‘‘).reverse().join(‘‘) }}</p>
    </div>
    <script>
        var vApp = new Vue({
                el: "#app",
                data: { 
                    message: ‘‘ 
                }
            });
    </script>
</body>
</html>

下面是预览效果:

技术分享图片

3. 然后我们 F12 , 看一下更改 vApp.$data.message 的值是否可以让页面进行相应修改, 如果可以, 那说明 双向绑定 正常.