vue.js的一些事件绑定和表单数据双向绑定

知识点： 
 v-on:相当于： 例如：v-on：click==@click  ,menthods事件绑定
   v-on修饰符可以指定键盘事件
v-model进行表单数据的双向绑定



<template>

<p v-for="item in list">{{item.name}} {{item.price}}</p>
<button v-on:click="addItem">addItem</button> <!--v-on：相当于@-->
 <button @click="addItem">addItem</button>

<input v-on:keydown.enter="onKeydown"/> <!--指令的修改器-->
 <componeta @my-event="onComponentEvent"></componeta>

<!--<input v-model="myValue" type="text"/>{{myValue}} --> <!--v-model文本框的事件绑定，表单的事件绑定---->
 <!--<input v-model.lazy="myValue" type="text"/>{{myValue}}--> <!--v-model.lazy延迟显示-->
 <!-- <input v-model.number="myValue" type="text"/>{{typeof myValue}}--> <!--v-model.number将123（string）转化为123（number）-->
 <input v-model.trim="myValue" type="text"/> {{myValue}} <!--v-model.trim截取字符串前后的空格-->

 <hr>
<input v-model="myBox" type="checkbox" value="apple"/> <!--v-model多选框的事件绑定-->
 <input v-model="myBox" type="checkbox" value="banna"/>
<input v-model="myBox" type="checkbox" value="pineapple"/>
 {{myBox}}

<input v-model="myBox1" type="radio" value="apple"/> <!--v-model单选框的事件绑定-->
 <input v-model="myBox1" type="radio" value="banna"/>
<input v-model="myBox1" type="radio" value="pineapple"/>
 {{myBox1}}

<!--v-model下拉框的事件绑定-->
 <!--版本一-->
 <!-- <select v-model="selection">
 <option value="1">1</option>
 <option value="2">2</option>
 <option value="3">3</option>
 </select>
 {{selection}}-->

 <select v-model="selection"> <!--版本二-->
 <option v-for="item in selectOption" v-bind:value="item.value">{{item.text}}</option>

</select>
 {{selection}}

</div>
</template>

<!--<script>
export default {
 name: 'app'
}
</script>-->
<!--导入组件-->
<script>
/* eslint-disable */
 import Vue from 'vue'
 import Hello from './components/Hello'
 import componeta from './components/a.vue'

export default {
/* name: 'app',
 components: {
 Hello
 },*/
 components:{
 componeta
 },
data(){
return{
myValue:'',
myBox:[],
myBox1:[],

转载于:https://www.cnblogs.com/shuaifing/p/7903780.html