v-model 双向数据绑定指令

v-model与各种表单控件的结合

v-model与单行输入框

v-model与单行输入框

<template>
  <div>
    <input v-model="textField"/>
    <p>文本输入框内容:{{textField}}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      textField:""
    }
  }
};
</script>

v-model与多行输入框

v-model与多行输入框

<template>
  <div>
    <textarea v-model="textarea"></textarea>
    <p style="white-space: pre-line;">多行文本内容:{{textarea}}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      textarea:"",
    }
  }
};
</script>

v-model与checkbox

v-model与checkbox

<template>
  <div>
    <input type="checkbox" value="足球" v-model="checkList"/>足球
    <input type="checkbox" value="篮球" v-model="checkList"/>篮球
    <input type="checkbox" value="排球" v-model="checkList"/>排球
    <p>{{checkList}}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      checkList:[],
    }
  }
};
</script>

v-model与选择列表

v-model与选择列表

<template>
  <div>
    <select v-model="selectList" multiple>
      <option>足球</option>
      <option>篮球</option>
      <option>排球</option>
    </select>
    <p>{{selectList}}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      selectList:[]
    }
  }
};
</script>

v-model修饰符

v-model常用的修饰符有lazy和trim。

对表单进行数据绑定时，我们可以使用修饰符来控制指令的一些行为。

lazy修饰符

lazy修饰符的作用类似于属性的懒加载。

v-model.lazy

<template>
  <div>
    <input v-model.lazy="textField"/>
    <p>文本输入框内容:{{textField}}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      textField:""
    }
  }
};
</script>

trim修饰符

trim修饰符的作用是将绑定的文本数据的首尾空格去掉。

v-model.trim

<template>
  <div>
    <input v-model.trim="textField"/>
    <p>文本输入框内容:{{textField}}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      textField:""
    }
  }
};
</script>