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

最新推荐文章于 2024-04-06 16:42:45 发布

weixin_43791795

最新推荐文章于 2024-04-06 16:42:45 发布

阅读量2.6k

点赞数 2

分类专栏： vue 文章标签： vue的input原理 v-model原理

本文链接：https://blog.csdn.net/weixin_43791795/article/details/100799460

版权

vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

在vue中的表单需要使用指令v-model实现数据的双向绑定。

使用v-model实现数据的双向绑定

输入框

<body>
  <div id="root">
    <!-- 通过v-model指令实现了输入框的值和data里的值双向绑定 -->
    <input type="text" v-model="inputValue"><br/>
    <span>你输入的内容是：{{inputValue}}</span>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#root",
      data() {
        return {
          inputValue: ''
        }
      }
    })
  </script>
</body>

在这里插入图片描述

选择框

<body>
  <div id="root">
    <div>
      <input type="checkbox" v-model="hobi" value="吃饭">吃饭
      <input type="checkbox" v-model="hobi" value="睡觉">睡觉
      <input type="checkbox" v-model="hobi" value="敲代码">敲代码
      <p>你的爱好是：{{hobi}}</p>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#root",
      data() {
        return {
          hobi: []
        }
      },

      methods: {
      }
    })
  </script>
</body>

v-model的实现原理

text 和 textarea 元素使用 value 属性和 input 事件实现v-model的效果

<body>
  <div id="root">
    <input
      type="text"
      :value="inputValue"
      @input="handleInputChange"
    ><br/>
    <span>你输入的内容是：{{inputValue}}</span>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#root",
      data() {
        return {
          inputValue: ''
        }
      },

      methods: {
        // 这里的e就是input事件，在事件里我们可以拿到你正在输入的值
        handleInputChange(e) {
          // 拿到正在输入的值赋值给inputValue
          // 只要绑定了inputValue的元素，在inputValue发生改变后都会重新渲染
          this.inputValue = e.target.value
        }
      }
    })
  </script>
</body>

checkbox 和 radio 使用 checked 属性和 change 事件

<!--
实现思路：
1、首先会在data里面定义初始的数组，用于放选中的值
2、通过includes判断数组里是否包含选框的值来决定checked是true还是false
3、通过change事件获取选中值并判断数组里面是否有该值，有删除，没有就添加
-->

<body>
  <div id="root">
    <div>
      <input
        type="checkbox"
        :checked=hobi.includes("吃饭")
        @change="inhandleCheck"
        value="吃饭"
      >吃饭
      <input
        type="checkbox"
        :checked=hobi.includes("睡觉")
        @change="inhandleCheck"
        value="睡觉"
      >睡觉
      <input
        type="checkbox"
        :checked=hobi.includes("敲代码")
        @change="inhandleCheck"
        value="敲代码"
      >敲代码
      <p>你的爱好是：{{hobi}}</p>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#root",
      data() {
        return {
          hobi: []
        }
      },

      methods: {
        inhandleCheck(e) {
          const v = e.target.value
          if(this.hobi.includes(v)) {
            // 有就删除
            this.hobi = this.hobi.filter(item => item !== v)
          } else {
            // 没有就添加
            this.hobi.push(v)
          }
        }
      }
    })
  </script>
</body>

weixin_43791795

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
八、Vue中的input数据双向绑定实现原理

在vue中的表单需要使用指令v-model实现数据的双向绑定。使用v-model实现数据的双向绑定输入框<body> <div id="root">  <input type="text" v-model="inputValue"><br/...
复制链接

扫一扫