Vue-(八)列表渲染

Posted on 本文总阅读量次

8-1.用v-for把陣列轉換為一組元素 (影片)

v-for項目基本語法

1
2
3
4
5
<div id="app">
  <ol>
    <li v-for="item in colors">{{item}}</li>
  </ol>
</div>
1
2
3
4
5
6
new Vue({
  el:'#app',
  data:{  
    colors:['學習javascrip','學會vue框架','做作品','準備面試']
  },
})

補充：HTML ul 與 ol 差異==

將item拿出來當作屬性

1
2
3
4
5
6
7
<div id="app">
  <ol>
    <li v-for="item in todo" v-bind:class='item.key'>
      {{item.date}} {{item.content}}
    </li>
  </ol>
</div>
1
2
3
4
5
6
.first{
  color:red;
}
.second{
  color:green;
}
1
2
3
4
5
6
7
8
9
new Vue({
  el:'#app',
  data:{  
    todo:[{key:'first',date:'3/9',content:'學習javascrip'},
      {key:'second',date:'3/10',content:'學會vue框架'},
      {key:'second',date:'3/11',content:'做作品'},
      {key:'second',date:'3/12',content:'準備面試'}]
  },
})

用index綁定value

1
2
3
4
5
<div id="app">
  <select >
    <option v-for="(item,index) in monthes" :value="index">{{item}}</option>
  </select>
</div>
1
2
3
4
5
6
new Vue({
  el:'#app',
  data:{ 
    monthes:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
  },
})

8-2.用v-for把物件轉換為一組元素 (影片)

注意
v-forrender出來的順序不一定會跟物件中的順序一樣，所以如果是需要遵從順序的情況，盡可能使用陣列

1
2
3
<div id="app">
  <span v-for="(value,key) in me">{{key}}-{{value}}<br/></span>
</div>

1
2
3
4
5
6
7
8
9
10
new Vue({
  el:'#app',
  data:{
    me:{
      name:'Leah',
      age:26,
      gender:"Female",
    }
  }
})

8-3.修改陣列或物件的注意事項 (影片)

陣列新增、刪減、排列基本語法

  • push(ew item)從陣列後面新增
  • pop()從陣列後面刪減
  • unshift(new item)從陣列前面新增
  • shift()從陣列前面刪減
1
2
3
4
5
6
7
8
9
<div id="app">
  <ul>
    <li v-for="item in steps">{{item}}</li>
  </ul>
  <button @click="push">Push</button>
  <button @click="pop">Pop</button>
  <button @click="shift">Shift</button>
  <button @click="unshift">Unshift</button>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
new Vue({
  el:'#app',
  data:{
    steps:[1,2,3,4,5],
  },
  methods:{
    push(){
      this.steps.push(this.steps.length+1);
    },
    pop(){
      this.steps.pop();
    },
    shift(){
      this.steps.shift();
    },
    unshift(){
      this.steps.unshift(0);
    },
    
  }
})

  • splice(index,length)從陣列中切割
    第一個參數index代表陣列中要開始被切割的元素索引，第二個length參數代表要被切割掉的長度(元素數量)

    1
    2
    3
    splice(){//切除陣列中倒數第二個元素
      this.steps.splice(this.steps.length-2,1);
    }

  • splice(index,length,...)從陣列中切除，並添加新的元素

    1
    2
    3
    splice(){//從steps[1]開始切除0個，並從該位置添加元素'new1','new2','new3'
          this.steps.splice(1,0,'new1','new2','new3');
        }

  • slice(from,to)從陣列中取出部分元素，並重組出一個新的陣列
    ==slice()不會改變原先的陣列，會產出一個新的陣列==

    1
    2
    3
    4
    5
    6
    7
    8
    9
    slice(){
          this.steps = this.steps.slice(1,4);
        },
    ``` 
    * `sort()`從陣列中的元素從小到大排列
    ```javascript=
    sort(){
          this.steps.sort();
        }

  • reverse()從陣列中的元素反過來從後面到前面排列

    1
    2
    3
    reverse(){
          this.steps.reverse();
        }

  • filter()從陣列中的過濾符合條件的元素，並重組出一個陣列

    1
    2
    3
    4
    5
    6
    7
    //將steps中的每個元素一個個檢查
    //若符合(item%2===0)，則會被放入新陣列中
    //最後將新的陣列作為filter()的回傳值
    //並重新assign給this.steps
    filter(){
          this.steps = this.steps.filter(item => item%2 === 0);
        }

注意！！！！

  • this.steps[0]=10, 不會修改陣列元素的值，應用splice()達到此目的
  • this.steps.length=0, 沒辦法清空陣列中的元素，應用splice()，或是slice()達到此目的。
  • this.obj.z=30, 沒有辦法達到新增物件屬性的功能
    1
    2
    3
    4
    <div id="app">
      <h4 v-for="(value,key) in obj">{{key}}={{value}}</h4>
      <button @click="addZ">Add Z</button>
    </div>

this代表Vue實例，Vue實例中有個方法$set()，第一個參數是設定的目標物件，第二個參數代表新增的key，第三個參數代表新增的value

1
2
3
4
addZ(){
  // this.obj.z = 300;//無效
  this.$set(this.obj,'z',300);
    }

或是，這樣寫

1
2
3
addZ(){
  Vue.set(this.obj,'z',300);
    }

注意：
this.$set()與Vue.set()用於物件原先沒有該屬性的情況;若情況是要修改物件本來就存在的屬性值，直接改寫就可以

8-4.列表的過濾與排序 (影片)

1
2
3
4
5
6
7
8
<div id="app">
  <ul>
    <li v-for="item in nums">{{item}}</li>
  </ul>
  <button @click="initiate">Initiate</button>
  <button @click="filter">Filter</button>
  <button @click="sort">Sort</button>
</div>

sort()會改變原先的this.num陣列;又因為data中nums=orgNums，所以最外面的orgNums也被改變了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const orgNums = [5,6,1,2,4,3,8,7,9];
new Vue({
  el:'#app',
  data:{
    nums:orgNums,
    
  },
  methods:{
    initiate(){
      this.nums = orgNums;
    },
    filter(){
      this.nums = this.nums.filter(item =>item%2===0);
    },
    sort(){
      this.nums.sort();
    },
  }
})

因此，若要避免原先的陣列被改動而喚不回初始值，可以利用slice()語法，先複製一個新的陣列

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const orgNums = [5,6,1,2,4,3,8,7,9];
new Vue({
  el:'#app',
  data:{
    nums:orgNums,
    
  },
  methods:{
    initiate(){
      this.nums = orgNums;
    },
    filter(){
      this.nums = this.nums.filter(item =>item%2===0);
    },
    sort(){
      this.nums = this.nums.slice().sort();
    },
  }
})

8-5.用v-for渲染templete [(影片)]

(https://hiskio.com/courses/145/lectures/5382)

  • 每次迴圈需要被render出來的不只一個元素，而是包含多個標籤元素，可以使用<templete></templete>，並將v-for指令放在templete標籤中。
    1
    2
    3
    4
    5
    6
    <div id="app">
      <template v-for='item in header'>
        <h1>{{item}}</h1>
        <hr/>
      </template>
    </div>
1
2
3
4
5
6
7
8
9
new Vue({
  el:'#app',
  data:{
    header:['Home','About','Product','Contact']
  },
  methods:{
    
  }
})

8-6.實作：從JSON資料渲染課程列表 [(影片)]

(https://hiskio.com/courses/145/lectures/5383)

在mounted()階段引入JSON格式資料

  • 用原生的fetch()

    1
    2
    3
    4
    5
    mounted(){
        fetch('./data.json')
        .then(res => res.json())
        .then(lessons => this.lessons = lessons);
    },

  • 引入jquery寫法

    1
    2
    $.getJSON('./data.json')
                .then(lessons => this.lessons = lessons);

  • axios寫法

    1
    axios.get('./data.json').then(res =>this.lessons = res.data);

結果呈現

補充
vscode 擴充套件 - Live Server：可以快速地建造一個本地端的server

8-7.片尾彩蛋：認識JSON格式 [(影片)]

(https://hiskio.com/courses/145/lectures/5470)

「JSON格式」本身是一個「字串」

JSON格式的限制

  • JSON格式的key一定要有雙引號””
  • 最後一個value不能有,結尾
  • value不能是函式（不過可以把它存成字串，之後再轉為函式執行）

    格式轉換

  • javascript物件轉為JSON格式：JSON.stringify();
1
2
3
4
5
6
7
8
const data = {
  name:"point",
  x:100,
  y:200
}

const dataJSON = JSON.stringify(data);
console.log(dataJSON);

印出結果，用“”代表是一個字串(JSON格式字串)

  • JSON格式轉為javascript物件：JSON.parse();
1
2
const dataObj = JSON.parse(dataJSON);
console.log(dataObj);

印出結果，是一個物件

replacer:重建JSON資料

將物件轉換為JSON格式時，只取其中部分的key值。
作法：在stringify()的第二個參數放上key字串組成的陣列[‘x’,’y’];若放null，則代表曲全部的資料

1
2
3
4
5
6
7
8
9
console.clear();
const data = {
  name:"point",
  x:100,
  y:200
}

const dataJSON = JSON.stringify(data,['x','y']);
console.log(dataJSON);

印出結果，產出的JSON格式資料中，只有出’x’,’y’

提高JSON格式易讀性

為了易讀性，讓JSON格式排列整齊，每個key值前面補上空格
作法：在stringify()的第三個參數空格數量

1
2
const dataJSON = JSON.stringify(data,null,2);
console.log(dataJSON);

格式JSON搭配try,catch()

因為不能保證每次能成功將JSON格式轉換為物件，為了避免城市卡住，通常會搭配try,catch(err)處理錯誤

1
2
3
4
5
try{
  const data = JSON.parse(dataJSON);
}catch(err){
  const data = {};
}

Vue.js
© 2020 Leah's Blog All Rights Reserved. 本站访客数人次 本站总访问量次
Theme by hiero