v-model

目录

v-model  数据绑定

 type=radio 单选框

type=checkbox 复选框

v-model的修饰符 

.lazy 

.number 

.trim 

值绑定  

---

v-model  数据绑定

表单元素上创建双向数据绑定。即数据更新了 元素更新、元素更新了 数据也会更新;

后面跟表达式,跟的往往是data配置项 中的数据;

实现表单元素和数据的双向绑定;是响应式的;

本质上v-model为语法糖;是v-bind和v-on的语法糖;

v-bind:value; v-on:input事件

// v-bind绑定一个value属性
// v-on指令给当前元素绑定input事件  
// 下面代码 等同于 使用v-model

<div id="app">
    <input type="text" :value="message" @input="message = $event.target.value">
    {{message}}
</div>

cosnt app = new Vue({
    el: '#app',
    data: {
        message: '你好'
    }
})

 type=text 文本框 

v-model绑定的数据和表单value是同步的; 

value值和data中的数据是双向绑定的,响应式的;

视图中的表单元素的value值改变了, data里面的message就改变了;

data中的数据改变,视图中的表单元素的value值也是同步改变的;

<div id="app">
  <input v-model="message">
  <p>Message 为: {{ message }}</p>
</div>


const vm = new Vue({
  el: '#app',
  data:; {
    message: '你好 世界'
  }
})

// 界面的message数据改了, data里面的message就改变了, 是双向的

 type=radio 单选框

v-model绑定的数据和value同步

 <div id="app">
    <label for="man">
      <input type="radio" name="sex" value="男人" id="man" v-model="sex">男
    </label>
    <label for="woman">
    <input type="radio" name="sex" value="女人" id="woman" v-model="sex">女
  </label>
  <h2>选择的性别是:{{sex}}</h2>
  </div>


 data: {
        sex:"男人" //默认的
      },

type=checkbox 复选框

单个复选框

v-model绑定的是一个布尔值，v-model=“布尔值”,通常在data中定义一个变量接收这个布尔值;

<label for="one">
   <input type="checkbox"  id="one" v-model="isAgree">同意协议
</label>
<button :disabled="!isAgree">下一步</button>//disabeld 禁用, 属性绑定,可以使用data中的数据了
<h4>checkbox单选框是布尔值:{{isAgree}}</h4>



data: {
        isAgree: false, //定义默认是fasle的
        
      },

type=checkbox 复选框

多个复选框

v-model绑定到同一个数组，v-model=“Array”;

v-model绑定的是选中的复选框的value值; 数组中的值为被选中的input标签的value值;

把选中的复选的value值方法这个数组中去;

    <input type="checkbox"  value="篮球" v-model="qiu">篮球
    <input type="checkbox"  value="足球" v-model="qiu">足球
    <input type="checkbox"  value="排球" v-model="qiu">排球
    <input type="checkbox"  value="乒乓球" v-model="qiu">乒乓球
    <h2>选择的是:{{qiu}}</h2>


data: {
        
        qiu: []
      },

textarea 

v-model绑定的数据和value是同步的;

<div id="app">
  <p >多行文本为：{{ message }}</p>
  <textarea v-model="message"></textarea>
</div>

data: {
    message: 'hello world'
  }

select

单选

v-model绑定到select上,绑定的是一个变量

v-model绑定的数据和option选项的value值是同步的;

      <select v-model="fruit">
        <option value="西瓜瓜">西瓜</option>
        <option value="哈密瓜子">哈密瓜</option>
        <option value="大菠萝">菠萝</option>
        <option value="小香蕉">香蕉</option>
      </select>
      <h2>我选择的水果是:{{fruit}}</h2>


 data:{
          fruit:'大菠萝', //默认的选项, 单项是一个data中的一个变量; 
        
           },

select 

多选

v-model绑定到selcect上,绑定到是一个数组;

给selct标签,添加multiple属性,; ctrl加鼠标左点击可以多选了;

      <select v-model="fruits" multiple>
        <option value="西瓜瓜">西瓜</option>
        <option value="哈密瓜子">哈密瓜</option>
        <option value="大菠萝">菠萝</option>
        <option value="小香蕉">香蕉</option>
      </select>
      <h2>多选的水果是:{{fruits}}</h2>


 data:{
          
          fruits:[]
           },

v-model的修饰符 

• .lazy;
• .number;
• .trim

修饰符可以连贯使用;

.lazy 

作用: 按下回车视图才会改变;

在默认情况下，v-model在每次input事件触发后将输入框的值与数据进行同步。如果要变为使用change事件同步可以添加lazy修饰符(按下回车视图才会改变)

<input v-model.lazy="msg" >

---

.number 

作用: 自动将用户的输入值转为数值类型：

<input v-model.number="age" type="number">

---

.trim 

作用: 自动过滤用户输入的首尾空白字符：

<input v-model.trim="msg">

值绑定  

 含义: 动态的给value赋值

• 在前面的value中的值, 都是在定义input的时候直接给定的
• 但真实开发中, input的值可能是从网络获取或定义在data中的
• 可以通过v-bind:value动态的给value绑定值

    <h2>我的选择是:{{hobbies}}</h2>
    <!-- v-for遍历的数组,item是数组的每一项 :value属性绑定,就可以使用data中的值 -->
    <label v-for="item in qiu" :key="item">
      <!-- :id属性绑定,可以使用data中的值了; :value属性绑定;
         v-model是数据的双向绑定,和value绑定;
         这是是多项框是一个数组,把数组中的值通过插值语法展示到h2上去 -->
      <input type="checkbox" :value='item' v-model="hobbies">{{item}}
    </label>



 data: {
        qiu: ["篮球", "足球", '乒乓球', '羽毛球', '台球', '高尔夫球', '棒球'],
        hobbies: []
      },