vue v-for遍历多种使用方式开发者社区

vue v-for遍历多种使用方式

原创

<!DOCTYPE html>
  <title>test</title>
  <script
    type="text/javascript"
    src="../../node_modules/vue/dist/vue.js"
  ></script>
</head>
  <div id="app">
      <li v-for="item in names">{{item}}</li>
  <script type="text/javascript">
    const app = new Vue({
      el: "#app",
      data: {
        names: ["james", "curry", "lotus"],
      methods: {},
  </script>
  <style></style>
</body>

<!DOCTYPE html>
  <title>test</title>
  <script
    type="text/javascript"
    src="../../node_modules/vue/dist/vue.js"
  ></script>
</head>
  <div id="app">
      <li v-for="(item,key) in names">
          <a>item是{{item}}</a>
          <a>key是{{key}}</a>
  <script type="text/javascript">
    const app = new Vue({
      el: "#app",
      data: {
        names: [{"Letter":"A"}, {"Letter":"B"}, {"Letter":"C"}],
      methods: {},
  </script>
  <style></style>
</body>

<!DOCTYPE html>
  <title>test</title>
  <script
    type="text/javascript"
    src="../../node_modules/vue/dist/vue.js"
  ></script>
</head>
  <div id="app">
      <li v-for="(item,key,index) in names">
          <a>item是{{item}}</a>
          <a>key是{{key}}</a>
          <a>index是{{index}}</a>
  <script type="text/javascript">
    const app = new Vue({
      el: "#app",
      data: {
        names: {"LetterA":"A","LetterB":"B","LetterC":"C"},

vue v-for遍历多种使用方式

vue v-for遍历多种使用方式

(1)v-for遍历数组获取数组的item对象的value

(2)v-for遍历数组获取数组的item和key

(3)对象遍历，v-for也可以对单个对象进行遍历