Vue.js 条件与循环

2021-04-14 07:27

阅读：419

标签：body bar 过滤器 src 判断 back 信息 png div

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

DOCTYPE html>
html>
head>
  meta charset="utf-8">
  title>demotitle>
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>cyyh1>
    p>正在学习vuep>
    p>哈哈哈，打字辛苦啊！！！p>
  template>
div>

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

    },
    filters:{//过滤器

    }
  })
script>

技术图片

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


{{#if ok}}
  h1>Yesh1>
{{/if}}

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

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

DOCTYPE html>
html>
head>
  meta charset="utf-8">
  title>demotitle>
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> 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>demotitle>
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>demotitle>
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 showh1>
div>

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

    },
    filters:{//过滤器

    }
  })
script>