ゼロ基礎学習Vue:第14課Vueのv-for遍歴生成ラベル命令:

17046 ワード
vue
ゼロ基礎学習Vue:第14課Vueのv-for遍歴生成ラベル命令:
配列を巡回:

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Documenttitle>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
head>
<body>
  <div id="app">
    <ul>
      
      <li v-for="(item, index) in arr">{{index}}--{{item}}li>
    ul>
  div>

  <script>
    let vm = new Vue({
      el:"#app",
      data: {
        arr:[1,2,3,4,5,6]
      },
      
    })
  script>
body>
html>

実行結果は次のとおりです.
● 0–1 ● 1–2 ● 2–3 ● 3–4 ● 4–5 ● 5–6
v-forは、次のようにオブジェクトを巡回することもできます.

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Documenttitle>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
head>
<body>
  <div id="app">
    <ul>
      
      <li v-for="(item, key) in obj">{{key}}--{{item}}li>
    ul>
  div>

  <script>
    let vm = new Vue({
      el:"#app",
      data: {
        obj:{
          name:"  ",
          age:18,
          sex:" "
        }
      },
      
    })
  script>
body>
html>

実行結果は次のとおりです.
●name–小明●age–18●sex–女
v-forオブジェクトカッコ内を巡回するには、3番目のプロパティがあります.
v-for(item,key,index)in obj→3番目の属性は下付き
v-forは、数値と文字列を次のように巡回することもできます.

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Documenttitle>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
head>
<body>
  <div id="app">
    <ul>
      
      <li v-for="(item, index) in 5">{{index}}--{{item}}li>
      <hr>
      <li v-for="(item, index) in 'abcdefg'">{{index}}--{{item}}li>
    ul>
  div>

  <script>
    let vm = new Vue({
      el:"#app",
      data: {
      }
    })
  script>
body>
html>

実行結果は次のとおりです.
0–1 1–2 2–3 3–4 4–5 —————————————————————————————— 0–a 1–b 2–c 3–d 4–e 5–f 6–g
シェル — $PATH をスペース区切りにして強引に for で回す例
vueページジャンプの2つの方法