vue事件绑定v-on和表单事件绑定v-model

责编:menVScode 2018-01-28 0:46 阅读(892)

        vue事件绑定的写法:v-on:事件名.修饰符 = "方法";简写方式:@事件名。修饰符 = "方法"

        自定义事件写法

        父组件:当compA监听到自定义事件my-event被触发的时候,去执行onComaMyEvent方法。

<template>
  <div id="app">
    <button @click="toggle">toggle</button>
    <compA @my-event="onComaMyEvent"></compA>
    <!-- 当compA监听到自定义事件my-event被触发的时候,去执行onComaMyEvent方法 -->
  </div>
</template>

<script>
import Vue from 'vue'
import compA from '@/components/a'
export default {
  name: 'App',
  components:{compA},
  data(){
    return { },
  methods:{
    onComaMyEvent(value){
      console.log('被子组件触发了!——'+value)
    }
  }
}
</script>

        子组件

<template>
    <button @click="emitMyEvent">emitMyEvent</button>
</template>
<script>
export default {
    methods:{
        emitMyEvent(){
            this.$emit('my-event','要传递给父组件的数据')
        }
    }
}
</script>   


        表单事件绑定v-model

        (1)checkbox类型

<template>
  <div id="app">
    <input type="checkbox" v-model="checkbox" value="11">
    <input type="checkbox" v-model="checkbox" value="22">
    <input type="checkbox" v-model="checkbox" value="33">
    {{checkbox}}
  </div>
</template>

<script>
import Vue from 'vue'
export default {
  name: 'App',
  data(){
    return { checkbox:["22"] }
  }
}
</script>

        checkbox类型的input表单元素,多选的时候,其对应的value值是以数组形式呈现。若需要默认选中某个input,那么在数组中写入其value即可。

        (2)radio类型

<template>
  <div id="app">
    <input type="radio" v-model="radio" value="11">
    <input type="radio" v-model="radio" value="22">
    <input type="radio" v-model="radio" value="33">
    {{checkbox}}
  </div>
</template>

<script>
import Vue from 'vue'
export default {
  name: 'App',
  data(){
    return { radio:"22" }
  }
}
</script>

        radio类型的input表单元素,选中的时候,其对应的value值是以字符串形式呈现。若需要默认选中某个input,那么在变量中写入其value即可。

        (3)select元素

<template>
  <div id="app">
    <select v-model="select">
      <option value="11">11</option>
      <option value="22">22</option>
      <option value="33">33</option>
    </select>
    {{select}}
  </div>
</template>

<script>
import Vue from 'vue'
import compA from '@/components/a'
export default {
  name: 'App',
  data(){
    return { select:'33' }
  }
}
</script>

        默认选中某个option,将其对应的value写在绑定的变量中即可。

        

        v-model的三种修饰符

        (1).lazy:取代 input 监听 change 事件,失去焦点的时候,显示内容;

        (2).number - 输入字符串转为数字

        (3).trim - 输入首尾空格过滤


标签: v-on vue v-model
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码