十三 v-model双向绑定

1. 原理:

 v-model 其实就是一个语法糖,它的背后本质上包含两个操作:
        1. v-bind绑定一个value属性
        2. v-on指定给当前元素绑定input事件
 
也就是下面的代码 : 等同于下面的代码
<input type="text" v-model="message">
等同于
<input type="text" :value="message" @input="message = $event.target.value">
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../jquery/vue.JS"></script>
  </head>
  <body>
    <!--
      v-model 其实就是一个语法糖,它的背后本质上包含两个操作:
        1. v-bind绑定一个value属性
        2. v-on指定给当前元素绑定input事件
     -->
    <div id="app">   
      <!-- <input type="text" v-model="message"> -->
      <!-- <input type="text" :value="message" @input="valueChange"> -->
      <input type="text" :value="message" @input="message = $event.target.value">
      <span> {{ message }} </span>
    </div>
    <script>
      const app = new Vue({
        el: "#app",
        data: {
          message: "Hellow World"
        },
        methods: {
          valueChange(event){
            //console.log('----');
            this.message = event.target.value;
          }
        }
      });
    </script>
  </body>
</html>

2. v-model和radio的使用

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div id="app">
  <label for="male">
    <input type="radio" id="male"  value="男" v-model="sex">男
  </label>
  <label for="female">
    <input type="radio" id="female"  value="女" v-model="sex">女
  </label>
  <h2>选择的性别:{{sex}}</h2>
</div>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      message: "Hellow World",
      sex: '女'
    }
  });
</script>

3. v-model和checkedbox使用

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<div id="app">
  <!-- checked单选框 -->
  <label for="agree">
    <input type="checkbox" id="agree" v-model="Isagree">同意协议
  </label>
  <h2>选择的是:{{Isagree}}</h2>
  <button :disabled="!Isagree">下一步</button>
  <p></p>
 
  <!-- checked多选框 -->
  <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>
  const app = new Vue({
    el: "#app",
    data: {
      message: "Hellow World",
      Isagree: false,
      hobbies: []
    }
  });
</script>

4. v-model和select的使用　　

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<div id="app">
  <!-- 1. 选择一个 -->
  <select name="abc" v-model="fruit" style="width: 150px;">
    <option value="苹果">苹果</option>
    <option value="香蕉">香蕉</option>
    <option value="橙子">橙子</option>
    <option value="葡萄">葡萄</option>
    <option value="梨子">梨子</option>
  </select>
  <h2>你选择的水果是:{{fruit}}</h2>
 
  <!-- 2. 选择多个 -->
  <select name="abcd" v-model="fruits" multiple style="width: 150px;">
    <option value="苹果">苹果</option>
    <option value="香蕉">香蕉</option>
    <option value="橙子">橙子</option>
    <option value="葡萄">葡萄</option>
    <option value="梨子">梨子</option>
  </select>
  <h2>你选择的水果是:{{fruits}}</h2>
</div>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      message: "Hellow World",
      fruit: "香蕉",
      fruits:[]
    }
  });
</script>

5. v-model 修饰符

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div id="app">
  <!-- 1. 修饰符：lazy，失去焦点后进行双向绑定 -->
  <input type="text" v-model.lazy="message">
  <h2>{{message}}</h2>
 
  <!-- 2. 修饰符：number（默认情况下v-model双向绑定后识别的数据类型为string类型） -->
  <input type="text" v-model.number="age">
  <h2>{{age}}-{{typeof age}}</h2>
 
  <!-- 3. 修饰符：trim() ,去除空格-->
  <input type="text" v-model.trim="name">
  <h2>输入的名字{{name}}</h2>
</div>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      message: "Hellow World",
      age: 0,
      name: ''
    }
  });
</script>

　　

　

 
posted @   搬砖工具人  阅读(43)  评论(0)  编辑  收藏  举报
相关博文：
·  三、动态绑定属性（Class）
·  五、动态绑定属性（style）
·  v-model 双向绑定原理
·  v-model原理
·  v-model指令的学习
阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示
AI IDE Trae