//js
new Vue({
el: "#id",
data: {
phone: "",
pwd: "",
msg: "我的信息"
},
methods: {
yyy(e){
this.phone = e.target.value
}
}
})
//html
<input id="xxx" type="tel" v-bind:value="phone" v-on:input="yyy($event)">
Vue 的API
-
v-bind:value="phone": value的數(shù)據(jù)綁定灵疮，DOM從實(shí)例的 data 中獲取织阅。簡寫:value="phone" -
v-on:input="yyy($event)":事件監(jiān)聽，發(fā)生該事件震捣，執(zhí)行回調(diào)函數(shù)yyy荔棉，函數(shù)定義在實(shí)例的 methods 中 -
v-model="phone":value 的雙向綁定，其實(shí)就是上面2個(gè)的組合蒿赢，語法糖 -
v-model.trim="phone"：.trim用來去掉首尾空格 -
{{msg}}:文本的雙向綁定 -
v-show="isTrue"DOM節(jié)點(diǎn)切換display润樱。如果isTrue為真，display為block或原來的值羡棵。如果isTrue為假壹若，display為none -
v-if="isTrue"DOM節(jié)點(diǎn)存不存在，如果如果isTrue為真，DOM 存在店展。如果isTrue為假养篓，DOM不存在 -
v-for="item in Arr"：遍歷對數(shù)組Arr，每個(gè)參數(shù)起名字叫 item, -
:key="ltem.id"：跟蹤每個(gè)節(jié)點(diǎn)的身份赂蕴，從而重用和重新排序現(xiàn)有元素柳弄，最好加上，用v-bind = key"item.id"概说，前面是簡寫碧注。
簡寫：
v-on:input 簡寫成 @input
