【基础16】表单数据的双向绑定

czh 7/6/2021 vue3vue3基础双向绑定

# 【基础16】表单数据的双向绑定

Vue是数据驱动的开发，其中最重要的一点应用是数据的双向绑定

# 基本骨架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="https://unpkg.com/vue@next" ></script>
</head>
<body>
    <div id="app"></div>
</body>
<script>
    const app=Vue.createApp({ 
    data(){
        return{}
    },
    methods:{

    },
    template:`
        <div></div>
        ` 
    }) 
    const vm=app.mount("#app")

</script>
</html>

# input的数据双向绑定

这个可能是最简单和最常用的双向绑定方式，我们先在模板中给写一个<input/>，然后在data中声明一个name的变量。有了变量后和input进行双向数据绑定。

<script>
    const app=Vue.createApp({ 
    data(){
        return{
            name:'陈叔叔'
        }
    },
    template:`
        <div>
            <div>{{name}}</div>
            <input v-model="name" />
        </div>
        ` 
    }) 
    const vm=app.mount("#app")
</script>

写完这个，打开浏览器预览一下效果。可以看到，当input框改变时，对应的变量也会变化，页面中的值也会变化。

那什么是双向绑定那？

data中的变量改变时，绑定的数据会跟随变化，此为一项修改；当通过页面修改数据，data中的变量也随之改变，这就是另一项修改。两个彼此依存改变，就为双向数据绑定。

目前这种就完成了<input />的双向数据绑定。

# textarea的数据双向绑定

以前我们写HTML的时候，写textarea标签都是成对出现的，比如这样<textarea></textarea>，如果想在Vue中实现textarea的双向数据绑定，这时候只要写单标签就可以了，剩下的事情Vue底层就帮你完成了。

template:`
    <div>
        <div>{{name}}</div>
        <div><input v-model="name" /></div>
        <div><textarea v-model="name" /></div>  
    </div>
    `

这样也是可以实现数据的双向绑定的。

# checkbox数据双向绑定

checkbox是一个勾选框（复选框），如果只有一个选项时，我们可以给<checkbox />一个布尔值，也就是true或者false。

现在data中新声明一个变量checked.

data(){
    return{
        name:'',
        checked:false
    }
},

然后在模板中进行双向数据绑定。

<div>{{checked}}<input type="checkbox" v-model="checked" /></div>

写完后进行预览，双向绑定是完全可以实现的。checkbox还有一个功能就是复选，可以选择多个。

比如还是陈叔叔，李叔叔，张叔叔，现在勾选谁，谁就可以显示在页面上。

这时候要先定义一个变量，这个变量是一个空数组。

data(){
        return{
            name:'陈叔叔',
            checked:false,
            uncles:[]
        }
    },

然后增加模板中的内容如下。

    template:`
        <div>
            {{uncles}}
            陈叔叔<input type="checkbox" v-model="uncles" value="陈叔叔" />
            张叔叔<input type="checkbox" v-model="uncles" value="张叔叔" />
            李叔叔<input type="checkbox" v-model="uncles" value="李叔叔" />
        </div>
        ` 
    })

# Radio的双向数据绑定

学会了checkbox的双向数据绑定，radio单选按钮就简单了。但是需要注意的是，既然是单选，这时候data中的变量就不能是一个数字了，一般是一个字符串。比如我们这里新定义了一个uncle的变量。

data(){
    return{
        name:'',
        checked:false,
        uncles:[],
        uncle:'',
    }
},

复制上面的template代码，然后进行修改，把checkbox换成radio,代码如下:

    template:`
        <div>
            {{uncles}}
            陈叔叔<input type="radio" v-model="uncle" value="陈叔叔" />
            张叔叔<input type="radio" v-model="uncle" value="张叔叔" />
            李叔叔<input type="radio" v-model="uncle" value="李叔叔" />
        </div>
        ` 
    })

这样就完成了单项选择的数据双向数据绑定了。

前端极客

Choose mode