Vue - v-model_v-model值可以是一个函数吗-CSDN博客

本文链接：https://blog.csdn.net/qq_33962481/article/details/119171720

文章目录

一、JavaScript高阶函数
二、表单绑定v-model
- 1. v-model的解析
- 2. 不使用v-model实现动态改变
二、v-model结合radio类型使用
二、v-model结合checkbox类型使用
- 1. checkbox单选框
- 2. checkbox多选框
三、v-model结合select类型使用
- 选择单个
- 选择多个
四、值绑定
五、v-model修饰符的使用

一、JavaScript高阶函数

1. filter()

filter()方法里面接收一个回调函数, 在每一次遍历的时候都会执行一次回调函数.
filter()会把每次遍历的数字都放到回调函数里面, 所以回调函数需要定义一个形参来接收.
filter()中的回调函数必须返回一个布尔值. 当返回true时, 函数内部会自动将这次回调的n加入到新的数组中.

<script>
  let nums = [12, 222, 544, 33, 99];
  const newNums = nums.filter(function(num) {
    return num > 100;
  })
  console.log(newNums);
</script>

2. map()

filter()方法里面接收一个回调函数, 在每一次遍历的时候都会执行一次回调函数.
filter()中的回调函数返回处理后的数据, 函数内部会自动将这次处理后的数据加入到新的数组中.

<script>
  let nums = [12, 222, 544, 33, 99];
  const newNums = nums.map(function(num) {
    return num * 2;
  })
  console.log(newNums);
</script>

3. reduce

reduce对数组中所有的内容进行汇总

<script>
  let nums = [12, 222, 544, 33, 99];
  // 这里的0表示给第一次遍历时的preValue赋一个初始值
  let total = nums.reduce(function (preValue, n) {
    return preValue + n
  }, 0)
</script>

二、表单绑定v-model

表单控件在实际开发中是非常常见的, 特别是对于用户信息的提交. 需要大量的表单
Vue中使用v-mode指令来实现表单元素和数据的双向绑定.

<body>
  <div id="app">
    <div>
      <h2>{{message}}</h2>
    </div>
    <input type="text" v-model="message">
  </div>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        message: "v-model的使用"
      }
    })
  </script>
</body>

之前做过一个输入快递单号的案例, 使用v-model可以很容易的实现此功能.

1. v-model的解析

当我们在输入框输入内容时.
因为input中的v-model绑定了message, 所以会实时将输入的内容传递给message, message发送改变
当message发送改变时, 因为上面我们使用Mustache语法, 将message的值插入到DOM中, 所以DOM会发送响应的改变.

2. 不使用v-model实现动态改变

<body>
  <div id="app">
    <input type="text" :value="message" @input="chageMe">
    <h2>{{message}}</h2>
  </div>

  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        message: "哈哈哈"
      },
      methods: {
        chageMe() {
          this.message = event.target.value;
        }
      },
    })
  </script>
</body>

二、v-model结合radio类型使用

<body>
  <div id="app">
    <!-- v-model传递给sex的是value里面的数据 -->
    <input type="radio" id="nan" value="男" v-model="sex"> 男
    <input type="radio" id="nv" value="女" v-model="sex"> 女
    <h3>{{sex}}</h3>
  </div>

  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        sex: '',
      }
    })
  </script>
</body>

如果v-model绑定的是同一个变量, 那么此时这两个input就是互斥的, 可以不添加name.
给sex一个默认值 ‘男’, 由于v-model是双向绑定, 所以value为男的对应的input会默认选中.

二、v-model结合checkbox类型使用

1. checkbox单选框

<body>
  <div id="app">
    <label for="agree">
      <input type="checkbox" id="agree" v-model="isAgree">同意协议
    </label>
    <h2>您选择的是{{isAgree}}</h2>
    <button :disabled="!isAgree">下一步</button>
  </div>

  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        isAgree: false,
      }
    })
  </script>
</body>

2. checkbox多选框

<body>
  <div id="app">
    <input type="checkbox" value="篮球" v-model="hobbies">篮球
    <input type="checkbox" value="足球" v-model="hobbies">足球
    <input type="checkbox" value="排球" v-model="hobbies">排球
    <input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球
    <input type="checkbox" value="橄榄球" v-model="hobbies">橄榄球
    <h2>您的选择是{{hobbies}}</h2>
  </div>

  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        hobbies: []
      }
    })
  </script>
</body>

三、v-model结合select类型使用

选择单个

<body>
  <div id="app">
    <select name="abc" id="fruit" v-model="fruit">
      <option value="香蕉">香蕉</option>
      <option value="葡萄">葡萄</option>
      <option value="苹果">苹果</option>
      <option value="草莓">草莓</option>
    </select>
    <h2>您的选择是: {{fruit}}</h2>
  </div>

  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        fruit: '香蕉'
      }
    })
  </script>
</body>

选择多个

<body>
  <div id="app">
    <select name="abc" v-model="fruits" multiple>
      <option value="香蕉">香蕉</option>
      <option value="葡萄">葡萄</option>
      <option value="苹果">苹果</option>
      <option value="草莓">草莓</option>
    </select>
    <h2>您的选择是: {{fruits}}</h2>
  </div>

  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        fruit: '香蕉',
        fruits: []
      }
    })
  </script>
</body>

四、值绑定

就是v-bind在input中的应用

<body>
  <div id="app">
    <label v-for="item in hobbieValues" :for="item">
      <input type="checkbox" :value="item" :id="item" v-model="hobbies">{{item}}
    </label>
    <h2>您的选择是: {{hobbie}}</h2>
  </div>

  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        hobbies: [],
        hobbieValues: ['蓝旗', '绿旗', '彩旗', '黄旗']
      }
    })
  </script>
</body>

五、v-model修饰符的使用

1. lazy修饰符

默认情况下, v-model默认是在input事件中同步输入框的数据的.

一旦有数据发送改变对应的data中的数据就会自动发送改变

lazy修饰符可以让数据在失去焦点或者回车时才会更新.

<body>
  <div id="app">
      <input type="text" v-model.lazy="hobbies">
      <h2>{{hobbies}}</h2>
  </div>

  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        hobbies: '',
      }
    })
  </script>
</body>

2. number修饰符

默认情况输入框中无论是数字还是字母, 都会被当做字符串类型进行处理

但是如果我们希望处理的是数字类型, 最后直接将内容当做数字处理

number修饰符可以让在输入框中输入的内容自动转成数字类型.

<body>
  <div id="app">
      <!-- number修饰符的使用 -->
      <input type="number" v-model.number="age">
      <h2>{{typeof hobbies}}</h2>
  </div>

  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        age: '',
      },
    })
  </script>
</body>

3. trim修饰符

如果输入的内容首尾有很多空格, 可以使用trim修饰符过滤内容左右两边的空格

<body>
  <div id="app">
      <!-- lazy修饰符的使用 -->
      <!-- <input type="text" v-model.lazy="hobbies"> -->
      <!-- <h2>{{hobbies}}</h2> -->

      <!-- number修饰符的使用 -->
      <!-- <input type="number" v-model.number="age"> -->
      <!-- <h2>{{typeof hobbies}}</h2> -->

      <!-- trim修饰符的使用 -->
      <input type="text" v-model.trim="age">
      <h2>{{age}}</h2>
  </div>

  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        age: '',
      },
    })
  </script>
</body>