Vue3實現列表循環

今天小編和大家一起在Vue的路上探索，要實現的功能是這樣的。現將默認 數組內的渲染到頁面上，然后點擊按鈕之后，將文本框內的數據添加到列表上，效果如下

 

 

源碼是這樣的，下面我就結合代碼中的注釋來說明一下核心的代碼

Vue.createApp({
    data(){
        return {
            list:['item1','item2','item3','item4'], // 綁定v-for循環的列表
            inputVal:""  // 綁定文本框的內容
        }
    },
    methods:{
        handleAddItem(){ // 綁定按鈕的點擊事件
            this.list.push(this.inputVal) // 修改綁定的數據，在數組中增加數據
            this.inputVal = '' // 對綁定的值重新賦值，清空文本框內的值
        }
    },
    template:`
        <div>
            // 通過v-model綁定表單元素的值，也就是常說的數據雙向綁定
            <input v-model="inputVal" />
            // v-on:click是綁定按鈕的點擊事件，可以通過@click語法糖來替代
            <button v-on:click="handleAddItem">增加</button>
            <ul>
                // v-for和上一篇文章的v-if類似，都叫做指令
                // v-for用作數據的循環
                // v-for可以接受兩個參數，第一個是數組中元素，第二個元素是下標
                // 可以通過in和of兩個關鍵字鏈接綁定的變量
                // 不建議將v-if和v-for用在同一個元素上。非要用可以在外面嵌套div或者其他元素
                // 根據官方文檔，同時使用的時候，v-for的優先級會高於v-if
                <li v-for="(item,index) of list">{{item}}</li> 
            </ul>
        </div>
        `
}).mount('#root')

之前有過基礎或者細心的小伙伴會發現，小編在使用v-for的時候，后面用的是of關鍵字，那對於v-for來說，雖然官方文檔給的是in，那么of和in有什么不一樣呢？在原生js中，對於循環來說，可以使用關鍵字in和for來循環，得到的結果是不一樣的，就像這樣

let arr = [
  {name:'lilei',age:12},
  {name:'hanmeimei',age:20}
]
for(let item of arr){
  console.log(item)  // {{name:'lilei',age:12}  {name:'hanmeimei',age:20}
}

for(let key in arr){
  console.log(item) // 0  1
}

小編在查詢了一些資料后，得到這樣的結論，遍歷數組的時候，推薦使用of，語法為(item,index)。在遍歷對象的時候，推薦使用in，語法為(item,name,index)下面是實例

DATA:
    list:[
        {name:'1'},
        {name:'2'},
        {name:'3'}，
    ]

html:
<div class="items" v-for='(item,name,index) of list'>{{item}}->{{name}}->{{index}}</div>
<div class="items" v-for='(item,name,index) in list'>{{item}}->{{name}}->{{index}}</div>

// 輸出結果如下
{ "name": "1" }->0->
{ "name": "2" }->1->
{ "name": "3" }->2->

{ "name": "1" }->0->
{ "name": "2" }->1->
{ "name": "3" }->2->

DATA:
    listObject:{
        name:'soho',
        age:25,
        class:1909,
        grade:3
    } 

html:
<div class="items" v-for='(item,name,index) of listObject'>{{item}}->{{name}}->{{index}}</div>
<div class="items" v-for='(item,name,index) in listObject'>{{item}}->{{name}}->{{index}}</div>

// 輸出結果為
soho->name->0
25->age->1
1909->class->2
3->grade->3

soho->name->0
25->age->1
1909->class->2
3->grade->3

參考文章：

https://vue3js.cn/

https://www.cnblogs.com/Scooby/p/12160313.html