vue的常用指令之 v-model

最新推荐文章于 2022-05-13 15:00:41 发布

小黑七零八落

最新推荐文章于 2022-05-13 15:00:41 发布

阅读量275

点赞数 1

文章标签： vue的学习笔记

本文链接：https://blog.csdn.net/U_Are_My_Halo/article/details/89318972

版权

Vue 的常用指令之 v-model

指令 : 是vue中特殊的标记, 辅助html标签,增加html 标签之前没有的功能.

特点 : v-开头 , 写在头标签中, 作为一个属性.

v-model指令

v-model: 双向数据绑定 (把数据层和数据层的数据绑定到了一起,只要有一方发生了改变,另一方也会随着变化)

<body>
    <div id='app'>
        //通过v-model 就将输入框和data中的数据绑定了.
		<input type='text' v-model='num'>
        <input type='checkbox' v-model='isTrue'>
        <input type='radio' name='sex' v-model='val'>男
        <input type='radio' name='sex' v-model='val'>女
    </div>
<body>

<script	src='./....vue.js'><script>
<script>
    const vm = new Vue({
        //指定vue的管理边界(vue起作用的区域)
        el:'#app',
        // 数据
        data:{
            num:424,
            isTrue: true,
            val:'male'
        }
    })
</script>

Vue中数据实现双向绑定的原理

Vue中数据实现双向绑定的原理：是根据ES5中的 Object.defineProperty来实现的。

该属性的特点：

该属性无法shim（兼容）IE8及其以下版本的浏览器，这也是为什么Vue不能兼容IE8及其以下版本的浏览器的原因。
该属性的作用：添加、修改、获取属性。

下面用一段简单的代码,来实现Object.defineProperty的原理

<input type="text" value="zs" />

<script>
let inp = document.querySelector("input");
let obj = {
    //获取输入框的value值
    name: inp.value,
    age: 18
};

Object.defineProperty(obj, "name", {
    set(newVal) {
        console.log("设置值了", newVal);
        //设置值时,把值赋值给输入框
        inp.value = newVal;
    },
    get() {
        console.log("获取值了");
        return inp.value;
    }
});
</script>

//使用：
 Object.defineProperty(obj, "name", {
        set(newVal) {
          console.log("设置值了", newVal);
          temp = newVal;
        },
        get() {
          console.log("获取值了");
          return newVal;
        }
 });

//参数1: obj => 要给谁设置属性
//参数2: 'name' => 要给对象设置什么属性
//参数3: {}是一个配置项,里面有两个回调函数,setter和getter,
//当设置值时,调用setter;获取值时,调用getter.
//vue在底层就是封装了Object.defineProperty.

小黑七零八落

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
vue的常用指令之 v-model

Vue 的常用指令之 v-model指令 : 是vue中特殊的标记, 辅助html标签,增加html 标签之前没有的功能.特点 : v-开头 , 写在头标签中, 作为一个属性.v-model指令v-model: 双向数据绑定 (把数据层和数据层的数据绑定到了一起,只要有一方发生了改变,另一方也会随着变化)<body> <div id='app'...
复制链接

扫一扫