Vue.js 条件与循环

条件判断使用 v-if 指令: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>demo</title> </head> <body> <script...

条件判断使用 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>

  • 发表于 2020-02-28 18:01
  • 阅读 ( 151 )
  • 分类:网络文章

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除