码迷,mamicode.com
首页 > Web开发 > 详细

Vue.js 条件与循环

时间:2020-02-28 15:32:39      阅读:85      评论:0      收藏:0      [点我收藏+]

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

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

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

原文地址:https://www.cnblogs.com/chenyingying0/p/12377328.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!