vue学习 8vue-双向数据绑定_h('textarea-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_28137309/article/details/89042562

本文介绍了Vue.js中双向数据绑定的实现方式，包括使用v-model指令简化input等表单元素与数据模型之间的同步过程。同时对比了通过ref和$refs获取表单值的方法。

双向数据绑定一定是跟input、select或者是textarea有关系的（因为他们可以选择、输入）

在vue中使用v-model更适合

ref：ref在vue2.0中是可以用来给input标签标记的，标记完之后，我们就可以在js里面通过$refs去调用input标签中的值了。

<input type="text" v-on:keyup="logName" ref="name"> ，js中获取值：this.$refs.name.value;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Vue.js</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    <!-- vue-app是根容器 -->
    <div id="vue-app">
        <h1>双向数据绑定 / input /select /textarea </h1>
        <label>姓名：</label>
        <input type="text" v-on:keyup="logName" ref="name">
        <span>{{ name }}</span>
        <label>年龄：</label>
        <input type="text" v-on:keyup="logAge" ref="age">
        <span>{{ age }}</span>
    </div>
    <script src="app.js" type="text/javascript"></script>
</body>
</html>

使用v-model双向数据绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Vue.js</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    <!-- vue-app是根容器 -->
    <div id="vue-app">
        <h1>双向数据绑定 / input /select /textarea </h1>
        <label>姓名：</label>
        <input type="text" v-model="name">
        <span>{{ name }}</span>
        <label>年龄：</label>
        <input type="text" v-model="age">
        <span>{{ age }}</span>
    </div>
    <script src="app.js" type="text/javascript"></script>
</body>
</html>

app.js

'use strict';
// 实例化vue对象
new Vue({
    el: "#vue-app",
    data: {
        name: '',
        age: ''
    },
    methods: {
        logName: function(){
            // console.log("你正在输入你的名字");
            // this.name = this.$refs.name.value;
            // console.log(this.$refs.name.value);
        },
        logAge: function(){
            // console.log("你正在输入你的年龄");
            // this.age = this.$refs.age.value;
        }
    }
});