Vue条件渲染和基本列表-CSDN博客

本文链接：https://blog.csdn.net/LIUYJ520/article/details/126709549

条件渲染

v-show,v-if,v-else-if,template（模板）和v-if联合使用

 <body>
    <div id="root">
      <h2>
        欢迎来到
        <p v-show="a">{{name}}</p>
      </h2>
      <h2>n的当前值为：{{n}}</h2>
      <!-- v-show做条件渲染 -->
      <button @click="n++">点我n+1</button>
      <h2 v-show="n===1">n=1</h2>
      <h2 v-show="n===2">n=2</h2>
      <h2 v-show="n===3">n=3</h2>
      <!-- v-if做条件渲染 ，结构中间不能被打断-->
      <h2 v-if="n===1">n=1</h2>
      <h2 v-else-if="n===2">n=2</h2>
      <h2 v-else-if="n===3">n=3</h2>
      <h2 v-else>else不用写条件了</h2>
      <!-- template（模板）只能和v-if联合使用 -->
      <template v-if="n===4">
        <h2>你好</h2>
        <h2>四川</h2>
        <h2>成都</h2>
      </template>
    </div>
  </body>
  <script type="text/javascript">
    const vm = new Vue({
      el: "#root",
      data: {
        name: "成都",
        a: true,
        n: 0,
      },
    });
  </script>

基本列表

    <!-- 插值语法中的数据来源：
    1.data中本来有的属性
    2.computed中计算得到的return值
    3.形参，例如下面的P 
    4.v-for循环对象时，value后面的key是键名
    5.in 和 of都可以使用-->

 <body>
    <div id="root">
      <h2>人员列表</h2>
      <ul>
        <!-- 插值语法中的数据来源：
        1.data中本来有的属性
        2.computed中计算得到的return值
        3.形参，例如下面的P 
        4.v-for循环对象时，value后面的key是键名
        5.in 和 of都可以使用-->

        <!-- 遍历数组 （用得多）-->
        <li v-for="(p,index) in persons" :key="index">{{p.id}}-{{p.name}}-{{p.age}}</li>
      </ul>
      <!-- 遍历对象 -->
      <ul>
        <li v-for="(value,key,index in car" :key="key">{{key}}-{{value}}-{{index}}</li>
      </ul>
      <!-- 遍历字符串 (用得少)-->
      <ul>
        <li v-for="(char,index) of str" :key="index">{{char}}-{{index}}</li>
      </ul>
      <!-- 遍历指定次数（用得少） -->
      <ul>
        <li v-for="(number,index) of 5" :key="index">{{number}}-{{index}}</li>
      </ul>
    </div>
    <script type="text/javascript">
      new Vue({
        el: "#root",
        data: {
          persons: [
            { id: "001", name: "张三", age: 17 },
            { id: "002", name: "张四", age: 18 },
            { id: "003", name: "张五", age: 19 },
          ],
          car: {
            name: "奥迪A6",
            price: "100万",
            color: "黑色",
          },
          str: "hello",
        },
      });
    </script>