Vue.js-v-model

1.1 v-model基本使用

Vue中使用v-model指令来实现表单元素和数据的双向绑定。

案例的解析

当输入框输入内容时，因为input中的v-model绑定了message。所以会实时将输入的内容传递给message，message发生改变。
当message发生改变时，因为上面我们使用Mustache语法，将message的值插入到DOM中，所以DOM会发生响应的改变。
所以，通过v-model实现了双向的绑定。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-model的基本使用</title>
</head>
<body>
<!--2.定义一个div元素-->
    <div id="app">
      <input type="text" v-model="message">
      <h2>{{message}}</h2>
    </div>

    <script src="../js/vue.js"></script>
    <script>
      // 创建对象
      const app = new Vue({
        // 挂载要管理的元素
        el: '#app',

        // 定义数据
        data: {
          message: 'hello Vue.js!!!'
        }
      })
  </script>
</body>
</html>

执行结果

1.2 v-mode的原理

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

v-bind绑定一个value属性。
v-on指令给当前元素绑定input事件。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-model使用原理</title>
</head>
<body>
<!--2.定义一个div元素-->
    <div id="app">
      <!--输入和监听-->
      <input type="text" :value="message" @input="message = $event.target.value">

      <h2>{{message}}</h2>
    </div>

    <script src="../js/vue.js"></script>
    <script>
      // 创建对象
      const app = new Vue({
        // 挂载要管理的元素
        el: '#app',

        // 定义数据
        data: {
          message: 'hello world!'
        },
        // 方法
        methods: {
          valueChange(event){
            this.message = event.target.value;
          }
        }
      })
  </script>
</body>
</html>

执行结果

1.3 v-model结合radio类型

当存在多个单选框时。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-model结合radio</title>
</head>
<body>
<!--2.定义一个div元素-->
    <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>

      <h3>您选择的性别是:{{sex}}</h3>
    </div>

    <script src="../js/vue.js"></script>
    <script>
      // 创建对象
      const app = new Vue({
        // 挂载要管理的元素
        el: '#app',

        // 定义数据
        data: {
          sex: '男'
        }
      })
  </script>
</body>
</html>

执行结果

1.4 v-mode结合单选框

单个勾选框

v-model即为布尔值，此时input的value并不影响v-model的值。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-mode结合单选框</title>
</head>
<body>
<!--2.定义一个div元素-->
    <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: {
          message: 'hello world!',
          isAgree: false
        }
      })
  	</script>
</body>
</html>

执行结果

1.5 v-mode结合复选框

多个复选框

当是多个复选框时，因为可以选中多个，所以对应的data中属性是一个数组。

当选中某一个时，就会将input的value添加到数组中。

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-mode结合复选框</title>
</head>
<body>
<!--2.定义一个div元素-->
    <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">羽毛球
      <h2>您的爱好是: {{hobbies}}</h2>

    </div>

    <script src="../js/vue.js"></script>
    <script>
      // 创建对象
      const app = new Vue({
        // 挂载要管理的元素
        el: '#app',
        // 定义数据
        data: {
          message: 'hello world!',
          isAgree: false,
          hobbies:[]
        }
      })
  </script>
</body>
</html>

执行结果

1.6 v-model结合select类型

基本特点

单选：只能选中一个值。

v-model绑定的是一个值。
当我们选中option中的一个时，会将它对应的value赋值到mySelect中

多选：可以选中多个值。

v-model绑定的是一个数组。
当选中多个值时，就会将选中的option对应的value添加到数组mySelects中。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-model结合select类型</title>
</head>
<body>
<!--2.定义一个div元素-->
    <div id="app">
      <!--选择一个-->
      <select name="abc" v-model="fruit">
        <option value="苹果">苹果</option>
        <option value="香蕉">香蕉</option>
        <option value="榴莲">榴莲</option>
        <option value="葡萄">葡萄</option>
      </select>

      <h3>您选择的水果是:{{fruit}}</h3>

      <!--多选择-->
      <select name="abc" v-model="fruits" multiple>
        <option value="苹果">苹果</option>
        <option value="香蕉">香蕉</option>
        <option value="榴莲">榴莲</option>
        <option value="葡萄">葡萄</option>
      </select>
      <h3>你选择的水果是:{{fruits}}</h3>
    </div>

    <script src="../js/vue.js"></script>
    <script>
      // 创建对象
      const app = new Vue({
        // 挂载要管理的元素
        el: '#app',

        // 定义数据
        data: {
          fruit: '香蕉',
          fruits: []
        }
      })
  </script>
</body>
</html>

执行结果

1.7 值绑定

值绑定就是动态的给value赋值而已。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>值绑定</title>
</head>
<body>
      <div id="app">
        <label v-for="item in originHobbies" :for="item">
          <input type="checkbox" :value="item"  v-model="hobbies">{{item}}
        </label>
        <h3>您的爱好是: {{hobbies}}</h3>
      </div>

      <script src="../js/vue.js"></script>
      <script>
        // 创建对象
        const app = new Vue({
          // 挂载要管理的元素
          el: '#app',

          // 定义数据
          data: {
            hobbies: [],
            originHobbies: ['篮球', '足球', '乒乓球', '羽毛球', '台球', '高尔夫球']
          }
        })
    </script>
</body>
</html>

执行结果

1.8 v-model修饰符

lazy修饰符

默认情况下，v-model默认是在input事件中同步输入框的数据的。
也就是说，一旦有数据发生改变对应的data中的数据就会自动发生改变。
lazy修饰符可以让数据在失去焦点或者回车时才会更新。

number修饰符

默认情况下，在输入框中无论我们输入的是字母还是数字，都会被当做字符串类型进行处理。
但是如果我们希望处理的是数字类型，那么最好直接将内容当做数字处理。
number修饰符可以让在输入框中输入的内容自动转成数字类型。

trim修饰符

如果输入的内容首尾有很多空格，通常我们希望将其去除，trim修饰符可以过滤内容左右两边的空格。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-model修饰符作用</title>
</head>
<body>
    <div id="app">
      <!--1.修饰符:lazy可以让数据在失去焦点或者回车时才会更新-->
      <input type="text" v-model.lazy="message">
      <h2>{{message}}</h2>

      <!--2.修饰符:number可以让在输入框中输入的内容自动转成数字类型-->
      <input type="number" v-model.number="age">
      <h2>{{age}}-{{typeof age}}</h2>

      <!--3.trim修饰符可以过滤内容左右两边的空格-->
      <input type="text" v-model.trim="name">
      <h2>你输入的名字:{{name}}</h2>
    </div>

    <script src="../js/vue.js"></script>
    <script>
      // 创建对象
      const app = new Vue({
        // 挂载要管理的元素
        el: '#app',
        // 定义数据
        data: {
          message: 'hello Vue.js!!!',
          age: 0,
          name: ''
        }
      })
  </script>
</body>
</html>

执行结果

posted @ 2021-10-28 19:53 guardwhy 阅读(176) 评论(0) 收藏举报

刷新页面返回顶部

guardwhy

Vue.js-v-model

1.1 v-model基本使用

1.2 v-mode的原理

1.3 v-model结合radio类型

1.4 v-mode结合单选框

1.5 v-mode结合复选框

1.6 v-model结合select类型

1.7 值绑定

1.8 v-model修饰符

公告