vue 基礎入門筆記 04

click_man發表於2019-08-14
Vue筆記
1. v-for的四種情況
    * 陣列
    * 陣列物件
    * 物件
    * 數字
2. 在元件中key是必須的
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    <div id="app">
        <!-- 陣列 -->
        <p v-for="(item,index) in list">索引值{{index}}-------每一項{{item}}</p>
        <!-- 陣列物件 -->
        <p v-for="(item,index) in list2">索引值{{index}}-------每一項{{item.name}}</p>
        <!-- 物件 -->
        <p v-for="(val,key,index) in list3">索引值{{index}}-------每一項{{val}}-----key{{key}}</p>
        <!-- 數字 -->
        <p v-for="count in 10">{{count}}</p>
        <!-- key的屬性只能是number 或者 string -->
        <p  v-for="count in 10"  :key="count">{{count}}</p>
    </div>
    <script>
        var vm=new Vue({
           el:'#app',
           data:{
               list:[
                   'a','b','c'
               ],
               list2:[
                   {'name':'aaaa'},
                   {'name':'bbbb'},
                   {'name':'cccc'},
                   {'name':'dddd'},
               ],
               list3:{
                   name:'zs',
                   sex:'man',
                   age:20
               }
           },
           methods:{}
        });
    </script>
</body>
</html>

日照香爐生紫煙

相關文章