【学习笔记】vue基础---v-model

文章目录

• 基础用法
• input
• textarea
• checkbox多选框
• raido单选按钮
• 选择框
• 值的绑定
• 修饰符
• .lazy
• .number
• .trim
• 组件上使用v-model

基础用法

input

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

textarea

<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<br>
<textarea v-model="message" placeholder="add multiple lines"></textarea>

checkbox多选框

//单个复选框绑定到布尔值
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>

//多个复选框绑定到数组
<div id='example-3'>
  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
  <label for="jack">Jack</label>
  <input type="checkbox" id="john" value="John" v-model="checkedNames">
  <label for="john">John</label>
  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
  <label for="mike">Mike</label>
  <br>
  <span>Checked names: {{ checkedNames }}</span>
</div>
new Vue({
  el: '#example-3',
  data: {
    checkedNames: []
  }
})

raido单选按钮

<div id="example-4">
  <input type="radio" id="one" value="One" v-model="picked">
  <label for="one">One</label>
  <br>
  <input type="radio" id="two" value="Two" v-model="picked">
  <label for="two">Two</label>
  <br>
  <span>Picked: {{ picked }}</span>
</div>
new Vue({
  el: '#example-4',
  data: {
    picked: ''
  }
})

选择框

<div id="example-5">
  <select v-model="selected">
    <option disabled value="">请选择</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <span>Selected: {{ selected }}</span>
</div>

new Vue({
  el: '...',
  data: {
    selected: ''
  }
})
//多选时绑定到一个数组
<div id="example-6">
  <select v-model="selected" multiple style="width: 50px;">
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <br>
  <span>Selected: {{ selected }}</span>
</div>
new Vue({
  el: '#example-6',
  data: {
    selected: []
  }
})

值的绑定

<!-- 当选中时，`picked` 为字符串 "a" -->
<input type="radio" v-model="picked" value="a">

<!-- `toggle` 为 true 或 false -->
<input type="checkbox" v-model="toggle">

<!-- 当选中第一个选项时，`selected` 为字符串 "abc" -->
<select v-model="selected">
  <option value="abc">ABC</option>
</select>

但是有时我们可能想把值绑定到 Vue 实例的一个动态属性上，这时可以用 v-bind 实现，并且这个属性的值可以不是字符串。

//复选框
<input
  type="checkbox"
  v-model="toggle"
  true-value="yes"
  false-value="no"
>
// 当选中时
vm.toggle === 'yes'
// 当没有选中时
vm.toggle === 'no'


//单选按钮
<input type="radio" v-model="pick" v-bind:value="a">
// 当选中时
vm.pick === vm.a

//选择框的选项
<select v-model="selected">
    <!-- 内联对象字面量 -->
  <option v-bind:value="{ number: 123 }">123</option>
</select>
// 当选中时
typeof vm.selected // => 'object'
vm.selected.number // => 123

修饰符

.lazy

.number

如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：

.trim

如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符

组件上使用v-model

<input v-model="searchText">
//searchText 就是用户在输入框输入的值
//等价于
<input
  v-bind:value="searchText"
  v-on:input="searchText = $event.target.value"
>
//给这个input绑定一个serchText的值
//让这个input监听input事件，当用户进行输入的时候，让这个监听input事件的元素的值（即用户输入的值）赋值给searchText
//这里的event是一个对象

当用在组件上时，v-model则会这样

<custom-input
  v-bind:value="searchText"
  v-on:input="searchText = $event"
></custom-input>
//这里的$event取决于$emit('input',第二个参数)的第二个参数

为了让它正常工作，这个组件内的 input必须：

将其 value 特性绑定到一个名叫 value 的 prop 上
在其 input 事件被触发时，将新的值通过自定义的 input 事件抛出

Vue.component('custom-input', {
  props: ['value'],
  template: `
    <input
      v-bind:value="value"
      v-on:input="$emit('input', $event.target.value)"
    >
  `
})

现在 v-model 就应该可以在这个组件上完美地工作起来了：

 <div id="app1">
            <custom-input v-model="searchText"></custom-input>
            <span>input:{{searchText}}</span>
        </div>


new Vue({
    el:"#app1",
    data:{
        searchText:'33333'
    }
})
//如果规定了serchText的值，那么这个值会传给value，所以输入框里面就会有serchText的值。反之，如果用户输入触发了emit方法，那么这个方法就会抛出用户输入的值，从而更新value，从而更新serchText

来源：CSDN

作者：安柠儿_Anni

链接：https://blog.csdn.net/mszm520/article/details/103613412