vue.js的一些事件绑定和表单数据双向绑定
Posted shuaiflying
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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:[],
以上是关于vue.js的一些事件绑定和表单数据双向绑定的主要内容，如果未能解决你的问题，请参考以下文章