vue数据渲染、条件判断及列表循环

最新推荐文章于 2025-02-19 06:07:30 发布

转载最新推荐文章于 2025-02-19 06:07:30 发布 · 784 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：http://www.cnblogs.com/v616/p/11260641.html

标签

#javascript #ViewUI

收录于

本文详细介绍Vue.js的基本使用方法，包括数据渲染、条件判断和列表循环等核心功能，适合初学者快速掌握Vue.js的基础操作。

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>