知識(shí)點(diǎn)：
v-on:相當(dāng)于： 例如：v-on：click==@click ,menthods事件綁定
v-on修飾符可以指定鍵盤事件
v-model進(jìn)行表單數(shù)據(jù)的雙向綁定



<template>

<p v-for="item in list">{{item.name}} {{item.price}}</p>
<button v-on:click="addItem">addItem</button> <!--v-on：相當(dāng)于@-->
<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）轉(zhuǎn)化為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>-->
<!--導(dǎo)入組件-->
<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:[],

轉(zhuǎn)載于:https://www.cnblogs.com/shuaifing/p/7903780.html

總結(jié)

以上是生活随笔為你收集整理的vue.js的一些事件绑定和表单数据双向绑定的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。