vue指令 v-model双向绑定

v-model简单介绍

主要作用便是监听数据的变化后，将模板和实例中的相应数据绑定在一起，实际上相当于 v-bind和@input的结合操作

<!-- name 和name1中能达到的效果基本一致  -->
<template>
<div>
  <label for="name">姓名<input type="text" name="name" v-model="name" /></label>
  <label for="name1">姓名1<input type="text" name="name1" v-bind:value="name" @input="nameInput($event)" /></label>
  <div>{{name}}</div>
</div>
</template>

<script>

export default {
  name: 'VueBase',
  data () {
    return {
      name: '张三'
    }
  },
  computed: {
  },
  filters: {
  },
  methods: {
    nameInput (e) {
      this.name = e.target.value
      console.log(e.target.value)
    }
  },
  // 生命周期 - 创建完成（访问当前this实例）
  async created () {

  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted () {
  }
}
</script>
<style scoped>
/* @import url(); 引入css类 */

</style>

v-model 修饰符 v-model.lazy 回车或者失去焦点时，双向绑定生效

<!--  -->
<template>
<div>
  <label for="name">姓名<input type="text" id="name" v-model.lazy="name" /></label>
  <div>{{name}}</div>
</div>
</template>

<script>
export default {
  name: 'VueOne',
  data () {
    return {
      name: ''
    }
  },
  methods: {

  },
  // 生命周期 - 创建完成（访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted () {

  }
}
</script>
<style scoped>
/* @import url(); 引入css类 */

</style>

v-model 修饰符 v-model.number 输入的内容自动转化为数字格式

因为作为数字数据的时候，本人在传值过程中都会处理为数字格式，因此除非是整体表单提交过程，否则对个人意义不大

<!--  -->
<template>
<div>
  <label for="age">年龄<input type="text" id="age" name="age" v-model.number="age" /></label>
  <div>{{typeof age}}</div>
</div>
</template>

<script>
export default {
  name: 'VueOne',
  data () {
    return {
      age: ''
    }
  },
  methods: {

  },
  // 生命周期 - 创建完成（访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted () {

  }
}
</script>
<style scoped>
/* @import url(); 引入css类 */

</style>

v-model 修饰符 v-model.trim 去除空格前后的字符串

注意： 必须是回车或者离开焦点之后才会触发，否则效果不进行触发。
实际web开发情况下也没什么大用处

<!--  -->
<template>
<div>
  <label for="name">姓名<input type="text" name="name" id="name" v-model.trim="name" @input="changeInput($event)" /></label>
  <div>{{name}}</div>
</div>
</template>

<script>
export default {
  name: 'VueOne',
  data () {
    return {
      name: ''
    }
  },
  methods: {
    changeInput (e) {
      console.log(e.target.value)
    }
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted () {

  }
}
</script>
<style scoped>
/* @import url(); 引入css类 */

</style>

v-model搭配radio

<!--  -->
<template>
<div>
  <label for="sex1"><input type="radio" id="sex1" name="sex" value="男" v-model="sex" />男</label>
  <label for="sex2"><input type="radio" id="sex2" name="sex" value="女" v-model="sex" />女</label>
  <hr />
  <div>{{sex}}</div>
  <hr />

</div>
</template>

<script>

export default {
  name: 'VueBase',
  data () {
    return {
      name: '张三',
      sex: '男'

    }
  },
  computed: {

  },
  filters: {

  },
  methods: {
    nameInput (e) {
      this.name = e.target.value
      console.log(e.target.value)
    }

  },
  // 生命周期 - 创建完成（访问当前this实例）
  async created () {

  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted () {
  }
}
</script>
<style scoped>
/* @import url(); 引入css类 */

</style>

v-model 搭配checkbox

<!-- checkbox多选框的使用 -->
<template>
<div>
  <div>
    <label v-for="(v) in list" :key="v.id" :for="'ball_' + v.id"><input type="checkbox" :id="'ball_' + v.id" :value="v.name" name="ball" v-model="checkBoxArr"/>{{v.name}}</label>
  </div>
  <hr />
  <div>{{checkBoxArr.toString()}}</div>
</div>
</template>

<script>

export default {
  name: 'VueBase',
  data () {
    return {
      list: [
        {id: 1, name: '篮球'},
        {id: 2, name: '足球'},
        {id: 3, name: '排球'},
        {id: 4, name: '网球'}
      ],
      checkBoxValue: '',
      checkBoxArr: []

    }
  },
  computed: {
  },
  filters: {

  },
  methods: {
    nameInput (e) {
      this.name = e.target.value
      console.log(e.target.value)
    }
  },
  // 生命周期 - 创建完成（访问当前this实例）
  async created () {
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted () {
  }
}
</script>
<style scoped>
/* @import url(); 引入css类 */

</style>

v-model搭配select使用

<!--  -->
<template>
<div>
  <hr />
  <select name="year" v-model="year">
    <option v-for="(v) in yearList" :key="v.id" :value="v.year">{{v.year}}</option>
  </select>
  <hr />
  <div>{{year}}</div>
</div>
</template>

<script>

export default {
  name: 'VueBase',
  data () {
    return {

      yearList: [
        {id: 1, year: 2018},
        {id: 2, year: 2019},
        {id: 3, year: 2020},
        {id: 4, year: 2021}
      ],
      year: ''

    }
  },
  computed: {

  },
  filters: {

  },
  methods: {
    nameInput (e) {
      this.name = e.target.value
      console.log(e.target.value)
    }

  },
  // 生命周期 - 创建完成（访问当前this实例）
  async created () {

  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted () {
  }
}
</script>
<style scoped>
/* @import url(); 引入css类 */

</style>