Vue.js 条件与循环

Posted 2020-11-28 chenyingying0

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue.js 条件与循环相关的知识，希望对你有一定的参考价值。

条件判断使用 v-if 指令：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>demo</title>
</head>
<body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

<div id="demo">
  <p v-if="seen">现在你看到我了</p>
  <template v-if="ok">
    <h1>cyy</h1>
    <p>正在学习vue</p>
    <p>哈哈哈，打字辛苦啊！！！</p>
  </template>
</div>

<script>
  new Vue({
    el: ‘#demo‘,
    data: {
      seen: true,
      ok: true
    },
    methods:{

    },
    filters:{//过滤器

    }
  })
</script>

技术图片

在字符串模板中，如 Handlebars ，我们得像这样写一个条件块：

<!-- Handlebars 模板 -->
{{#if ok}}
  <h1>Yes</h1>
{{/if}}

可以用 v-else 指令给 v-if 添加一个 "else" 块：

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>demo</title>
</head>
<body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

<div id="demo">
  <div v-if="Math.random() > 0.5">
    >0.5
  </div>
  <div v-else>
    <=0.5
  </div>
</div>

<script>
  new Vue({
    el: ‘#demo‘,
    data: {

    },
    methods:{

    },
    filters:{//过滤器

    }
  })
</script>

技术图片

v-else-if 在 2.1.0 新增，顾名思义，用作 v-if 的 else-if 块。可以链式的多次使用：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>demo</title>
</head>
<body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

<div id="demo">
  <div v-if="type===‘a‘">
    a
  </div>
  <div v-else-if="type===‘b‘">
    b
  </div>
  <div v-else-if="type===‘c‘">
    c
  </div>
  <div v-else>
    not a b c
  </div>
</div>

<script>
  new Vue({
    el: ‘#demo‘,
    data: {
      type:"c"
    },
    methods:{

    },
    filters:{//过滤器

    }
  })
</script>

技术图片

也可以使用 v-show 指令来根据条件展示元素

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>demo</title>
</head>
<body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

<div id="demo">
  <h1 v-show="ok">i can show</h1>
</div>

<script>
  new Vue({
    el: ‘#demo‘,
    data: {
      ok:true
    },
    methods:{

    },
    filters:{//过滤器

    }
  })
</script>

技术图片

以上是关于Vue.js 条件与循环的主要内容，如果未能解决你的问题，请参考以下文章