vue的`v-model`双向绑定

weixin_50929656

已于 2023-02-03 11:51:46 修改

阅读量258

点赞数

文章标签： vue.js javascript 前端

于 2023-02-03 11:40:54 首次发布

本文链接：https://blog.csdn.net/weixin_50929656/article/details/128863622

版权

v-model是双向绑定，视图（View）和模型（Model）之间会互相影响。既然是双向绑定，一定是在视图中可以修改数据的组件，这样就限定了视图的元素类型。

目前v-model的可使用元素有：

input
radio
checkbox
select
textarea
components（Vue中的自定义组件）

基本上除了最后一项，其它都是表单的输入项。

js/vue-2.6.12.js下载

http://链接：https://pan.baidu.com/s/1jVBY3NE77JsDse45Ofw9iw 提取码：q6q1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue-2.6.12.js"></script>
</head>
<body>
    <div id="app">
    <form>
        姓名: <input type="text" name="name" v-model="person.name"> <br>
    性别: <input type="radio" name="sex" value="1" v-model="person.sex"> 男
        <input type="radio" name="sex" value="0" v-model="person.sex"> 女 <br>
        爱好：<input type="checkbox" name="favorites" value="0" v-model="person.favorites"> 唱
        <input type="checkbox" name="favorites" value="1" v-model="person.favorites"> 跳
        <input type="checkbox" name="favorites" value="2" v-model="person.favorites"> Rap
        <input type="checkbox" name="favorites" value="3" v-model="person.favorites"> 打篮球 <br>
        学历：<select name="education" v-model="person.education">
        <option value="0">小学</option>
        <option value="1">中学</option>
        <option value="2">大学</option>
        <option value="3">Java练习生</option> 
        </select> <br>
        个性签名： <textarea name="signature" v-model="person.signature" cols="30" rows="10"></textarea> <br>
        <input type="submit" value="提交">
        
    </form>
    <hr>
    <button @click="updatePerson">点我修改person改变表单</button>
    <button @click="getPerson">点我获取表单同步后的person</button>
</div>
<script>
    const vm = new Vue({
        el:"#app",
        data:{
            person:{favorites:[]}
        },
        methods:{
            updatePerson(){
                this.person={
                    name:"xiaohei",
                    sex:1,
                    favorites:[0,1,2,3],
                    education:3,
                    signature:"小黑不是一般的黑"
                };
            },
            getPerson(){
                console.log(this.person);
            }
        }
    })
</script>
</body>
</html>

input 和 textarea 默认对应是字符串
radio对应的input的value值是预先定义好的，model中对应的值匹配哪个就选中哪个
多个 checkbox 对应的类型是一个数组
select 根据option子元素的value属性进行匹配选择

weixin_50929656

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue的`v-model`双向绑定

既然是双向绑定，一定是在视图中可以修改数据的组件，这样就限定了视图的元素类型。对应的input的value值是预先定义好的，model中对应的值匹配哪个就选中哪个。components（Vue中的自定义组件）基本上除了最后一项，其它都是表单的输入项。子元素的value属性进行匹配选择。对应的类型是一个数组。
复制链接

扫一扫