夜光带你走进Vue.js（十一）擅长的领域

夜光序言：

 

我才发现，这样的一个你，我竟等待了许久许久。久到我以为，这样的一个人，是不存在的，是我的梦。但我终于见到你了，鲜明的，生动的一个人在我眼前，绚丽的教人移不开眼。你笑了，我也笑了。

 

 

 

 

正文：

可以提供第二个的参数为键名：

v-for

 

<template>
  <div id="app">

    <ul>
      <li v-for="(value,key) in object">
        {{key}}----{{value}}
      </li>
    </ul>

  </div>
</template>
<script>
  export default{
    data(){
      return{
        type:'C',
        s:'yeguang',
        sites:[
          {name:'xiaoyan'},
          {name:'muchen'},
          {name:'yeguang'}
        ],
        object:{
          name:'夜光叙述',
          url:'http://ww.baidu.com',
          slogan:'学的是技术，更是理想'
        }
      }
    },
    methods:{

    }
  }
</script>
<style>

</style>

<template>
  <div id="app">

    <ul>
      <li v-for="(value,key,index) in object">
        {{key}}----{{value}}----{{index}}
      </li>
    </ul>

  </div>
</template>
<script>
  export default{
    data(){
      return{
        type:'C',
        s:'yeguang',
        sites:[
          {name:'xiaoyan'},
          {name:'muchen'},
          {name:'yeguang'}
        ],
        object:{
          name:'夜光叙述',
          url:'http://ww.baidu.com',
          slogan:'学的是技术，更是理想'
        }
      }
    },
    methods:{

    }
  }
</script>
<style>

</style>

<template>
  <div id="app">

    <ul>
      <li v-for="(value,key,index) in object">
        {{key}}----{{value}}----{{index}}
      </li>
      <li v-for="n in 10">
         {{n}}
      </li>
    </ul>

  </div>
</template>
<script>
  export default{
    data(){
      return{
        type:'C',
        s:'yeguang',
        sites:[
          {name:'xiaoyan'},
          {name:'muchen'},
          {name:'yeguang'}
        ],
        object:{
          name:'夜光叙述',
          url:'http://ww.baidu.com',
          slogan:'学的是技术，更是理想'
        }
      }
    },
    methods:{

    }
  }
</script>
<style>

</style>

<template>
  <div id="app">

    <ul>
      <li v-for="(value,key,index) in object">
        {{key}}----{{value}}----{{index}}
      </li>
      <li v-for="n in 10">
         {{n}}
      </li>
    </ul>
    <div v-for="n in 9">
      <b v-for="m in n">
        {{m}}*{{n}}={{m*n}}
      </b>
    </div>

  </div>
</template>
<script>
  export default{
    data(){
      return{
        type:'C',
        s:'yeguang',
        sites:[
          {name:'xiaoyan'},
          {name:'muchen'},
          {name:'yeguang'}
        ],
        object:{
          name:'夜光叙述',
          url:'http://ww.baidu.com',
          slogan:'学的是技术，更是理想'
        }
      }
    },
    methods:{

    }
  }
</script>
<style>

</style>