VUE条件语句

用户9184480

发布于 2024-12-19 14:18:13

8000

代码可运行

文章被收录于专栏：云计算linux云计算linux

运行总次数：0

代码可运行

随机生成一个数字，判断是否大于0.55，然后输出对应信息：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>v-else</title>
    <script src="js/vue.min.js"></script>
  </head>
  <body>
    <div id="app">
      <div v-if="Math.random()>0.5">
        大于0.55
      </div>
      <div v-else>
        不大于0.55
      </div>
    </div>
    <script>
      new Vue({
        el:'#app'
      })
    </script>
  </body>
</html>

该案例针对随机产生的数字进行判断，从而显示对应的内容。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>v-if-else2</title>
    <script src="js/vue.min.js"></script>
  </head>
  <body>
    <div id="app">
      <div v-if="type==='A'">
        A块
      </div>
      <div v-else-if="type==='B'">
        <h1 v-show="ok">ok.B</h1>
      </div>
      <div v-else-if="type==='C'">
        C块
      </div>
      <div v-else>
        其他块
      </div>
    </div>
    <script>
      new Vue({
        el:'#app',
        data:{
          type:'B',
          ok:true
        }
      })
    </script>
  </body>
</html>

v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后,注意不要都写成v-if,有三种形式。本处使用 v-show 指令来根据条件展示元素。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-03-09，如有侵权请联系 cloudcommunity@tencent.com 删除

app

VUE条件语句

VUE条件语句

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐