8、v-model的使用

一、基本使用

二、v-model与表单元素的结合使用

1. v-model与radio的结合使用
2. v-model与checkbox的结合使用
3. v-model与select的结合使用

三、值绑定

四、修饰符

1. lazy
2. number
3. trim

一、基本使用
实现双向绑定

  <div class='app'>
        <input type="text" name="" id="" v-model='message'>
        {{message}}
    </div>
    <script src='../vue.js'></script>
    <script>
        const app = new Vue({
            el: '.app',
            data: {
                message: '你好啊，世界！'
            }
        })
    </script>

二、v-model与表单元素的结合使用
1与radio的结合使用

 <div class='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='../vue.js'></script>
  <script>
      const app = new Vue({
          el: '.app',
          data: {
              message: '你好啊，世界！',
              sex: '男'
          }
      })
  </script>

2、与checkbox的结合使用
2.1 单选框

 <div class='app'>
        <label for="agree">
            <input type="checkbox" id='agree' v-model='isagree'>我同意此协议
        </label>
        <br>
        <button :disabled='!isagree'>下一步</button>
    </div>
    <script src='../vue.js'></script>
    <script>
        const app = new Vue({
            el: '.app',
            data: {
                message: '你好啊，世界！',
                isagree: false
            }
        })
    </script>

2.2复选框

 <div class='app'>
        <label for="hobby1">
            <input type="checkbox" id='hobby1' value="篮球" v-model='hobbies'>篮球
        </label>
        <label for="hobby2">
            <input type="checkbox" id='hobby2' value="足球" v-model='hobbies'>足球
        </label>
        <label for="hobby3">
            <input type="checkbox" id='hobby3' value="网球" v-model='hobbies'>网球
        </label>
        <label for="hobby4">
            <input type="checkbox" id='hobby4' value="羽毛球" v-model='hobbies'>羽毛球
        </label>
        <h2>你选择的爱好是：{{hobbies}}</h2>
    </div>
    <script src='../vue.js'></script>
    <script>
        const app = new Vue({
            el: '.app',
            data: {
                message: '你好啊，世界！',
                hobbies: []
            }
        })
    </script>

2.3、与select的结合使用

<div class='app'>
   <select name="abc" id="" v-model='fruit'>
        <option value="苹果">苹果</option>
        <option value="香蕉">香蕉</option>
        <option value="西瓜">西瓜</option>
        <option value="哈密瓜">哈密瓜</option>
    </select>
    <h2>你选择的水果是：{{fruit}}</h2>
</div>
<script src='../vue.js'></script>
<script>
    const app = new Vue({
        el: '.app',
        data: {
            message: '你好啊，世界！',
            fruit: []
        }
    })
</script>

三、值绑定
数据是可以动态决定的

 <div class='app'>
        <label for="hobby1" v-for='item in orginhobbies'>
            <input type="checkbox" id='hobby1' :value="item" v-model='hobbies'>{{item}}
        </label>

        <h2>你选择的爱好是：{{hobbies}}</h2>
    </div>
    <script src='../vue.js'></script>
    <script>
        const app = new Vue({
            el: '.app',
            data: {
                message: '你好啊，世界！',
                hobbies: [],
                orginhobbies: ['蓝球', '足球', '网球', '羽毛球']
            }
        })
    </script>

四、修饰符

  <div class='app'>
        //1.lazy修饰符，解决实时反映的修改 
        <input type="text" v-model.lazy='message'>{{message}}
        //2.number修饰符，解决v-model自动将输入的转换为字符
        <input type="number" v-model.number='number'>{{number}}
        //3、trim修饰符，将输入的多余的空格删除
        <input type="text" v-model.trim='name'>{{name}}
    </div>
    <script src='../vue.js'></script>
    <script>
        const app = new Vue({
            el: '.app',
            data: {
                message: '你好啊，世界！',
                number: 1,
                name: ''
            }
        })
    </script>