Vue.js 循环语句学习笔记

循环语句是编程中非常重要的一部分。在Vue.js中，使用v-for指令来进行循环操作。v-for指令可以遍历数组、对象和字符串，并按照一定规则进行渲染。

数组循环

htmlCopy Code
<template>
  <div>
    <h2>水果列表:</h2>
    <ul>
      <li v-for="(fruit, index) in fruits" :key="index">{{ fruit }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fruits: ['苹果', '香蕉', '橙子', '葡萄']
    }
  }
}
</script>

上面的例子中，使用了v-for指令遍历了一个水果数组，并将每个水果以列表项的形式展示在页面上。

对象循环

htmlCopy Code
<template>
  <div>
    <h2>学生信息:</h2>
    <ul>
      <li v-for="(value, key) in student" :key="key">{{ key }}: {{ value }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      student: {
        name: '小明',
        age: 18,
        grade: '初三'
      }
    }
  }
}
</script>

上面的例子中，使用了v-for指令遍历了一个学生对象，并将每个属性以列表项的形式展示在页面上。

字符串循环

htmlCopy Code
<template>
  <div>
    <h2>字母列表:</h2>
    <ul>
      <li v-for="(letter, index) in letters" :key="index">{{ letter }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      letters: 'abcdefghijklmnopqrstuvwxyz'
    }
  }
}
</script>

上面的例子中，使用了v-for指令遍历了一个英文字母字符串，并将每个字母以列表项的形式展示在页面上。

总结：Vue.js中的循环语句非常强大，可以处理多种情况。我们可以通过v-for指令来进行数组、对象和字符串的循环操作。