掌握vue指令之(11)v-model指令

最新推荐文章于 2024-04-09 14:48:57 发布

猿音

最新推荐文章于 2024-04-09 14:48:57 发布

阅读量1.1k

点赞数 1

分类专栏：笔记 vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_43348064/article/details/106226438

版权

笔记同时被 2 个专栏收录

24 篇文章 0 订阅

订阅专栏

vue

21 篇文章 0 订阅

订阅专栏

(11)v-model指令（双向绑定）

单向绑定：只能将new Vue()中模型对象中变量值的修改更新到页面上显示。如果页面中元素内容发生变化，无法自动将更改更新回new Vue()中的模型对象中保存。

解决：今后只要希望自动获得用户在界面上输入或选择的新值，都只能用双向绑定。

双向绑定:既能将new Vue()中模型对象中变量值的修改更新到页面上显示。又能将页面中元素内容发生的变化，自动更新回new Vue()中的模型对象中保存。

写法：<表单元素 v-model:~~可能变化的属性~~ =“变量”>

强调 :双向绑定几乎只用在表单元素上

原理: v-model包含两部分原理

(1). 从Model->View的绑定与之前讲解的绑定元素一样: 访问器属性+虚拟DOM树
(2). 但是从View->Model的绑定是新的原理：new Vue()扫描到包含v-model的表单元素时，就自动为表单元素绑定οnchange=function(){}事件处理函数。意为当表单元素的值发生改变时，就自动触发。然后，在onchange事件处理函数内，包含自动获取当前元素值并更新回Vue中指定变量中保存的语句。

示例: 根据文本框中输入的关键词搜索相关内容

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <!--想点百度一下，可按关键词搜索-->
  <!--1. 先做界面: 
    问题: 哪里可能发生变化
    本例中: 当用户在文本框中输入新内容时，input的value可能发生变化，希望new Vue()中自动获得用户输入的新值，所以用该用v-model:绑定。
    问题: 哪个元素会触发事件
    本例中: 点击button执行查找操作
          用户在文本框上按回车，也能执行和按钮的click一样的查找操作！-->
  <div id="app">
    <input type="text" @keyup="search2" v-model:value="keywords"><button @click="search">百度一下</button>
  </div>
  <script>
    //2. 定义new Vue()对象
    new Vue({
      el:"#app",
      //3. 定义模型对象
      //问题: 页面中共需要几个变量
      //本例中: 页面中只需要一个变量keywords，且如果用户未输入时，keywords的默认值为""
      //问题: 页面中共需要几个事件处理函数
      //本例中: 按钮需要search函数
      //       文本框需要search2函数
      data:{
        keywords:""
      },
      methods:{
        search(){
          //如果用户输入的关键词去空格后不为空
          //if(this.keywords.trim()!==""){
            //才用关键词执行查找操作
            console.log(`查找 ${this.keywords} 相关的内容....`)
          //}
        },
        search2(e){
          //只有点在回车上，才执行search操作
          if(e.keyCode==13){
            this.search();
          }
        }
      }
    })
  </script>
</body>
</html>

运行效果
在这里插入图片描述

其他类型的表单元素如何双向绑定

问题: 不是所有表单元素修改时，更新的都是value属性。比如radio和checkbox元素更新时，更新的就不是value属性。而是value属性写死固定不变，而更新checked选中状态属性
解决: 修改表单元素时，哪个属性变化，就用v-model绑定哪个属性。比如: 如果value属性值可能发生变化，就用v-model:value=“变量”。再比如: 如果checked属性可能发生变化，就用v-model:checked=“变量”。
写法:<input type="radio" value="写死的值" v-model:checked="变量">
示例: 切换选择性别

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <!--请用户选择性别-->
  <!--1. 先做界面
    问题: 界面中哪里可能发生变化
    本例中: 随着用户切换选择性别，两个input的checked属性可能发生变化又因为是表单元素
    所以: 两个input都用v-model:checked="变量"
    问题: 哪个元素可能触发事件
    本例中: 点按钮输出用户选择的性别值-->
  <div id="app">
    <label><input type="radio" name="sex" value="1" v-model:checked="sex">男</label>
    <label><input type="radio" name="sex" value="0" v-model:checked="sex">女</label>
    <br/>
    <button @click="submit">提交</button>
  </div>
  <script>
    //2. 创建new Vue()对象
    new Vue({
      el:"#app",
      //3. 定义模型对象
      //问题: 界面上一共需要几个变量
      //本例中: 界面上只需要一个变量sex
      //问题: 界面上共需要几个事件处理函数
      //本例中: 只需要一个事件处理函数submit
      data:{
        sex:0 //假设初始时选择0
      },
      methods:{
        submit(){
          console.log(`您本次选择的性别值为${this.sex}`)
        }
      }
    })
  </script>
</body>
</html>

运行效果
在这里插入图片描述

下拉选择框: …

当用户在select内选择不同的option时，其实改的是整个select的value属性。
写法： <select v-model:value="变量">
示例: 选择城市，查看城市图片(图片自行更换)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <!--用户选择城市，切换不同的城市图片-->
  <!--1. 做界面
    问题: 整个界面中共有几处可能发生变化？
    本例中: select元素的value属性值和img的src属性值，两处可能发生变化
    又因为: select元素是由用户手动选择的，而img的src是根据select的选择被动接受的。所以select元素采用双向绑定，img的src采用单项绑定。
    规律: select元素选中的value值，就是img的src值，所以，select的value和img的src可共用一个变量-->
  <div id="app">
    <select v-model:value="src">
      <option value="img/bj.jpg">北京</option>
      <option value="img/sh.jpg">上海</option>
      <option value="img/hz.jpg">杭州</option>
    </select><br/>
    <img :src="src">
  </div>
  <script>
    //2. 创建new Vue()对象
    new Vue({
      el:"#app",
      //3. 创建模型对象:
      //问题: 界面上共需要几个变量
      //本例中只需要一个变量就可同时控制select和img。
      data:{
        src:"img/sh.jpg",//开局默认选中上海
      }
    })
  </script>
</body>
</html>