Vue学习---第二天_v-model【6.2】

一、v-model基本使用

代码如下：

<div id='app'>
    <input type="text" v-model="message">{{message}}
  </div>

  <script src='./js/vue.js'></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: '你好'
      }
    })
  </script>

效果如下：

二、v-model原理

代码如下：

<div id='app'>
    <!-- <input type="text" v-model="message"> -->
    <!-- 把数据绑定到input中 -->
    <!-- <input type="text" :value="message" @input="valueChange"> -->
    <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: '你好'
      },
      methods: {
        valueChange(e) {
          this.message = e.target.value
        }
      }
    })
  </script>

效果如下：

三、v-model与表单结合

1.v-model：radio

代码如下：

<div id='app'>
    <label for="male">
      <!-- 有了v-model绑定，name可以去掉 -->
      <!-- name用来区别不同组的radio -->
      <input type="radio" id="male" name="sex" value="男" v-model="sex">男
    </label>
    <label for="female">
      <input type="radio" id="female" name="sex" value="女" v-model="sex">女
    </label>
    <h2>性别是：{{sex}}</h2>
  </div>

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

效果如下：

2.v-model：checkbox

代码如下：

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

    <!-- checkbox多选框 -->
    <label for="hobbies">
      <input type="checkbox" name="hobbies" id="" value="篮球" v-model="hobbies">篮球
      <input type="checkbox" name="hobbies" id="" value="足球" v-model="hobbies">足球
      <input type="checkbox" name="hobbies" id="" value="羽毛球" v-model="hobbies">羽毛球
      <input type="checkbox" name="hobbies" id="" value="乒乓球" v-model="hobbies">乒乓球
    </label>
    <h2>您的爱好是：{{hobbies}}</h2>
  </div>

  <script src='./js/vue.js'></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: '你好',
        isAgree: false,  //单选框
        hobbies: []      //多选框
      }
    })
  </script>

效果如下：

3.v-model：select

代码如下：

<div id='app'>
    <!-- 1.选择一个 -->
    <select name="abc" id=""  v-model="fruit" >
      <option value="苹果">苹果</option>
      <option value="香蕉">香蕉</option>
      <option value="胡萝卜">胡萝卜</option>
      <option value="菠萝">菠萝</option>
    </select>
    <h3>选择的水果为：{{fruit}}</h3>

    <!-- 2.选择多个 -->
    <select name="abc" id=""  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: {
        message: '你好',
        fruit: '香蕉',
        fruits: []
      }
    })
  </script>

效果如下：

四、值类型

五、修饰符

代码如下：

<div id='app'>
    <!-- 1.修饰符一：lazy失去焦点或回车 -->
    <input type="text" v-model.lazy="message">
    <h2>{{message}}</h2>

    <!-- 2.修饰符2：number -->
    <input type="number" v-model="age">
    <h2>{{age}}--{{typeof age}}</h2>

    <!-- 3.修饰符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: '你好',
        age: 0,
        name: ''
      }
    })
  </script>

效果如下：

内容持续更新中…
lvan学习笔记-文章内容仅个人观点
2020.6.2