Vue.js - 条件渲染 v-if、循环结构v-for、原始信息v-pre

最新推荐文章于 2023-02-21 13:55:44 发布

weixin_43331769

最新推荐文章于 2023-02-21 13:55:44 发布

阅读量203

点赞数 1

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_43331769/article/details/104045923

版权

vue 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

Vue.js - 条件渲染

一、分支结构
- v-if结构：表示渲染
- v-show 表示显示（已经渲染到页面）
二、循环结构 v-for
- 直接遍历元素
- 遍历对象中元素
三、v-if和v-for的结合使用
四、v-pre

一、分支结构

v-if结构：表示渲染

v-if
v-else
v-else-if

   <script>
    window.onload = function () {
      const vm = new Vue({
        el:'#app',
        data:{
          score:10,
          flag: false
        },
        methods:{
          handle(){
            this.flag = !this.flag;
          }
        }
      })
    }
  </script>
<body>
<div id="app">
      <div v-if="score >= 90">优秀</div>
      <div v-else-if = "score < 90 && score > 80">良好</div>
      <div v-else-if = "score < 80 && score > 60">一般</div>
      <div v-else>比较差</div>
      <div v-show="flag">显示 v-show </div>
      <button @click="handle"> 点击一下</button>
    </div>
</body>

v-show 表示显示（已经渲染到页面）

二、循环结构 v-for

直接遍历元素

v-for的直接遍历
v-for="item in fruits "
v-for的加索引遍历
v-for="(item, index) in fruits "

    <script type="text/javascript">
      window.onload = function () {
        const vm = new Vue({
          el:'#app',
          data:{
            fruits: ['apple', 'orange', 'banana']//数组方式存放数据
          },
        })
      }
    </script>
</head>
<body>
    <div id="app">
      <div>水果列表</div>
      <ul>
        <li v-for="item in fruits ">{{item}}</li>
        <li v-for="(item, index) in fruits ">{{item + ' ' + index}}</li>
      </ul>
    </div>
</body>

结果：
在这里插入图片描述

遍历对象中元素

    <script type="text/javascript">
      window.onload = function () {
        const vm = new Vue({
          el:'#app',
          data:{
            myFruits:[{
              ename: 'apple',
              cname: '苹果'
            },{
              ename: 'orange',
              cname: '橘子'
            },{
              ename: 'banana',
              cname: '香蕉'
            }]
          }
        })
      }
    </script>
</head>
<body>
    <div id="app">
      <div>水果列表</div>
      <ul>
        <li v-for="item in myFruits ">{{item.ename + '--------' + item.cname}}</li>
      </ul>
    </div>
</body>

结果：
在这里插入图片描述

三、v-if和v-for的结合使用

只有满足v-if中的条件才可遍历显示

    <script  src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script type="text/javascript">
      window.onload = function () {
        const vm = new Vue({
          el:'#app',
          data:{
            obj:{
              uname: 'lisi',
              age: 12,
              gender: 'male'
            }
          },
        })
      }
    </script>
</head>
<body>
    <div id="app">
      <div v-if="value == 12" v-for="(value, key, index) in obj">{{value + '-----' + key + 'index'}}</div>
    </div>

在这里插入图片描述

四、v-pre

作用：用来显示原始信息，跳过编译过程
eg：表示显示的是花括号，和括号内的原始信息

    <script type="text/javascript">
      window.onload = function () {
        const vm = new Vue({
          el:'#app',
          data:{
            message:'我是一个div'
          },
          methods:{

          }
        })
      }
    </script>
</head>
<body>
    <div id="app">
        <div v-pre>{{message}}</div>
    </div>
</body>