Vue的指令

用途

• 如果想在HTML中使用类似于JS中的for循环，就需要使用指令。
• 指令原本只是一个普通的HTML标签属性（如class, id, style），Vue通过解析处理这些特定的指令，使得HTML能够使用变量、运算和逻辑。

规范

• 书写位置: 任意HTML元素的开始标签内

• 使用v-作为指令的前缀。

v-for指令

语法

v-for：'item in items'

• 相当于for循环语句
• 参数名称可以修改
• item是第一个参数, 表示是数据里遍历的每一个成员
• in是语句, 表示遍历哪一个源数据
• items是源数据, 是data里的数据标识符,两处名称保持一致
• 可以遍历以下数据类型 Array | Object | number | string

带两个参数的v-for
v-for：'(item, index) in items' 遍历数组
v-for: '(key, value) in object' 遍历对象

• index表示item的索引, 可选参数
• index可以取出数组,对象,数字,字符串里每个元素的索引值
• key和value 可以取出对象的key和value
• 多个参数使用逗号隔开

作用

• v-for可以快速取出data里的大量数据, 对数据进行遍历并展示在页面

基本用法

遍历字符串

• 取出字符串里的每一个字符

  <div id='app'>
  <ul>
    <li v-for="i in words">
  
    </li>
  </ul>
  </div>
  <script>
    var vm = new Vue({
      el: "#app",
      data: {
      words: 'hello'
  }
  });
  </script>
  

结果为:

• h
• e
• l
• l
• o

遍历数字

• 取出数字里的所有整数

  <div id="app">
    <span v-for="i in myNumber">
  
    </span>
  </div>
  <script>
    var vm = new Vue({
      el: "#app",
      data: {
          myNumber: 6
      }
    });
  </script>
  

结果为:
1 2 3 4 5 6

遍历数组里的对象成员的key(属性)

• 数组里的元素为对象, 每个对象都有key和value,
• 通过遍历数组元素取出每个对象的msg, 就可以获取msg对应的value
• item.msg 使用点语法取出对象的key

<div id='app'>
<ul>
    <li v-for="item in arrays">
       {{ item.msg }} // 每个对象
    </li>
</ul>
</div>
<script>
   var vm = new Vue({
        el: '#app',
        data: {
            arrays: [
                {msg: 'A'},
                {msg: 'B'},
                {msg: 'C'}
            ] 
        }
    })
</script>

结果为:

• A
• B
• C

遍历带有索引的数组

• 在页面显示索引, 将index写入到双花括号里

 <div id='app'>
<ul>
    <li v-for="(item, index) in arrays">
       {{ item }}的索引为 {{ index }}
    </li>
</ul>
</div>
<script>
   var vm = new Vue({
        el: '#app',
        data: {
            arrays: ['A', 'B', 'C', 'D'] 
        }
    });
</script>

结果为:

• A 的索引为 0
• B 的索引为 1
• C 的索引为 2
• D 的索引为 3

遍历对象里的key, value, index

• 使用k, v取出对象里的key和value
• k, v分别是key, value的别名,可以任意命名
• index可以取出对象里每个key的索引值

三个参数
v-for= (k, v, index)in object

<div id="app">
  <ul>
    <li v-for="(v, k, index) in object">
     {{ index }} {{ key }} : {{ value }}
    </li>
  </ul>
</div>
<script>
new Vue({
  el: '#app',
  data: {
    object: {
      name: 'Rose',
      url: 'http://www.rose.com',
      msg: 'Hi,everybody!'
    }
  }
})

结果为:

• 0 name: Google
• 1 url: https://www.google.com
• 2 msg: Hi,everybody!