vue數據渲染、條件判斷及列表循環

 

1.數據渲染  {{msg}}

<template>
  <div id="app">
    {{msg}}
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Hello World'
    }
  }
}
</script>

<style>

</style>

 2.條件判斷  v-if="XXX"

<template>
  <div id="app">
    {{msg}}
    <hr>
    <block v-if="state">
      你看到我了
    </block>

  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Hello World',
      state:true
    }
  }
}
</script>

<style>

</style>

 3：列表循環 v-for="(item,index) in list" :key="index"

<template>
  <div id="app">
    {{msg}}
    <hr>
    <block v-if="state">
      你看到我了
    </block>
    <hr/>
    <ol>
      <li v-for="(item,index) in list" :key="index">
        {{item.text}}
      </li>
    </ol>
  </div>
</template>

<script>
export default {
  name: "app",
  data() {
    return {
      msg: "Hello World",
      state: true,
      list: [
        { text: "學習 JavaScript" },
        { text: "學習 Vue" },
        { text: "整個牛項目" }
      ]
    };
  }
};
</script>

<style>
</style>

 最終頁面效果：