十三 v-model双向绑定

1. 原理:

v-model 其实就是一个语法糖,它的背后本质上包含两个操作:

1. v-bind绑定一个value属性

2. v-on指定给当前元素绑定input事件

也就是下面的代码 : 等同于下面的代码

等同于

<!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的使用

    <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使用

    <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的使用　　

    <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 修饰符

    <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 @ 2022-04-07 14:34 搬砖工具人阅读(56) 评论(0) 收藏举报

刷新页面返回顶部

搬砖工具人

十三 v-model双向绑定

公告