v-for 获取数组key value_Vue之路 | 05von、vif、vfor
1
事件監聽
????在開發中，需要監聽用戶發生的事件，如點擊、拖拽、鍵盤操作等，在Vue中，使用v-on指令綁定事件監聽器。
v-on的語法糖為：@
v-on基本操作
????在下面代碼中，使用了v-on語法(使用的是語法糖@)綁定了一個點擊事件，事件指向了一個methods中定義的函數：
<div id="app"> <h1>{{message}}h1> <h2>{{counter}}h2> <button @click='inc'>+button> <button @click='sub'>-button> div> <script> const app = new Vue({ el:'#app', data:{ message:'歡迎光臨！請選擇您要購買的數量', counter:0 }, methods:{ inc(){ this.counter++ }, sub(){ this.counter-- } } })script>v-on參數
????有下列三種情況：
情況1：方法不需要傳參
情況2：若方法本省需要。一個參數，沒有傳入參數，只寫了一個()，形參為Undifiened；如果省略了小括號，vue會將默認的瀏覽器產生的event事件對象作為參數傳入到方法。
情況3：需要event對象同時也需要其他參數時，需要使用$event 手動獲取瀏覽器參數的event對象。
代碼示例如下：
<div id="app"> <button @click='btn1click'>按鈕1button> <button @click='btn1click()'>按鈕1button><br> <button @click='btn2click(123)'>按鈕2button> <button @click='btn2click()'>按鈕2button> <button @click='btn2click'>按鈕2button><br> <button @click='btn3click(123,$event)'>按鈕3button> div> <script> const app = new Vue({ el:'#app', data:{ message:'hello' }, methods:{ btn1click(){ console.log('點擊了按鈕1') }, btn2click(value){ console.log('點擊了按鈕2,參數為：'+ value) }, btn3click(value,event){ console.log('點擊了按鈕3，參數為'+value) console.log(event) } } })script>????依次點擊按鈕的效果輸出：
v-on修飾符
????某些情況下拿到event事件可以通過修飾符進行一些事件的處理，Vue中常用的一些修飾符如下：
(1).stop -調用event.stopPropagation()
????使用stop修飾符可以停止事件的冒泡，比如在下列代碼中，沒有使用stop修飾符時，點擊按鈕時會觸發btnclick以及divclick，使用后，就只觸發當前的btnclick：
<div id="app"> <div @click='divclick'> 一個div <button @click.stop='btnclick'>按鈕1button> div> div>(2).prevent -調用event.preventDefault()
????使用prevent修飾符可以阻止事件的默認行為，比如在一個表單的提交按鈕上，可以通過添加prevent阻止默認的跳轉動作：
<form action="www.baidu.com"> <input type="submit" value="提交" @click.prevent='sbmclick'> form> div>(3).{keyCode | keyAlias} -只當事件是從特定鍵觸發時才觸發回調
????比如通過如下方法，監聽是否敲下回車鍵：
<input @keyup.enter='onEnter'>(4)除此之外還有一些修飾符:
.native -監聽組件根元素的原生事件
.once -只觸發一次回調
2
條件判斷
v-if、v-else-if、e-else
????在vue中也支持使用v-if、v-else-if、v-else進行條件判斷：
<div id="app"> <h2 v-if='score>=90'>優秀h2> <h2 v-else-if='score>=80'>良好h2> <h2 v-else-if='score>=60'>及格h2> <h2 v-else='score>0'>不及格h2> div>????一個登錄切換框的實現：
<div id="app"> <span v-if='isUser'> <label for="username">{{message}}label> <input type="text" id="username" placeholder="請輸入用戶賬號" key='username'> span> <span v-else> <label for='email'>{{email}}label> <input type="text" id="email" placeholder="請輸入用戶郵箱" key='email'> span> <button @click='isUser = !isUser'>切換類型button> div> <script> const app = new Vue({ el:'#app', data:{ message:'用戶賬號', email:'用戶郵箱', isUser:true } })script>其中輸入框中的key值是否相同決定是否復用組件。
v-show
兩者的區別：
v-if：當條件為false時，dom中不會存在包含v-if指令的元素。
v-show：當條件為false時，v-show只是在元素中加了一個行內樣式display:none
在開發中，切片很頻繁時，使用v-show
代碼示例：
<div id="app"> <h2 v-if='isShow'>{{message}}h2> <h2 v-show='isShow'>{{message}}h2>div> <script> const app = new Vue({ el:'#app', data:{ message:'hello', isShow:true } })script>3
循環語句
????在實例中定義一個數組與一個對象：
<script> const app = new Vue({ el:'#app', data:{ arr:['XuanYi','MeiQi','ChaoYue'], obj:{ name: '熊吱', age:20, egname:'BearMouth' } } })script>遍歷數組
????可通過以下方法遍歷數組：
<ul> <li v-for="itm in arr">{{itm}}li> ul> <ul> <li v-for="(itm,index) in arr">{{itm}}--{{index}}li> ul>????輸出效果：
遍歷對象
????可通過以下方法遍歷對象：
<ul> <li v-for='value in obj'>{{value}}li> ul> <ul> <li v-for='(value,key) in obj'>{{value}}--{{key}}li> ul> <ul> <li v-for='(value,key,index) in obj'>{{value}}--{{key}}--{{index}}li> ul>????輸出效果：
key綁定
????為了高效的更新虛擬DOM：
????官方推薦在使用v-for時給對應的元素或組件綁定一個唯一的:key屬性
<ul> <li v-for="itm in arr" :key='itm'>{{itm}}li> ul>????這個和Vue的虛擬DOM的Diff算法有關，使用key給每個節點做一個唯一標識，Diff算法就可以正確識別此節點，就能找到正確的位置插入新的節點。
響應式的數組方法
????
????以上列舉了vue中響應式的數組方法(頁面會直接改變)，如果需要修改數組的元素，直接通過索引值修改是非響應式的，vue中也提供了一個set函數來修改數組元素：
Vue.set(要修改的對象，索引值，修改后的值)ENDVue之路系列文章：Vue之路 | 01-Vue安裝與初體驗Vue之路 | 02-VSCODE添加Vue模板Vue之路 | 03-插值操作與V-bindVue之路 | 04-計算屬性computed微信：熊吱
掃碼關注我們
互聯網知識交流平臺
你的每個贊和在看，我都喜歡！總結
以上是生活随笔為你收集整理的v-for 获取数组key value_Vue之路 | 05von、vif、vfor的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： java entitymanager类_
- 下一篇： vue设置img大小的属性_Vue.js