条件渲染、列表渲染-蒲公英云

条件渲染、列表渲染

条件渲染

1）v-if

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true值的时候被渲染。

<h1 v-if="type">Vue</h1>

Vue是否显示取决于type的取值为true则显示为false则不显示
也可以用 v-else ：

<h1 v-if="type">Vue</h1>
<h1 v-else>Oh no </h1>

type的取值为true则Oh no不显示；为false则显示Oh no
v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

2）v-else-if

<div id="app">
    <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 type="text/javascript">
var vm = new Vue({
    el : "#app",
    data : {
        type : "",
    }
});
</script>

当前代码页面显示为： Not A/B/C（因为type为空）
若type值为A 则页面中将显示A（同理可得BC）
v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后

3）v-show

用于根据条件展示元素的选项是 v-show 指令

<div id="app">
    <h1 v-show="ok">Hello!</h1>
</div>
<script type="text/javascript">
var vm = new Vue({
    el : "#app",
    data : {
        ok : false
    }
});
</script>

带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。（当ok为true时，h1将会切换元素的css属性display：block；）
注意：v-show 不支持 <template> 元素，也不支持 v-else。
如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

列表渲染

1）数组形式的列表渲染

可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而item 则是被迭代的数组元素的别名。
遍历数组：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="item,index in items" :key="index">//:key==@bind:key
        {
   {index}}{
   { item.msg }}//index索引值
        </li>
    </ul>
</div>
<script type="text/javascript">
var vm = new Vue({
    el : "#app",
    data : {
        items : [//定义items数组
            { msg: 'Foo' },
            { msg: 'Bar' }
        ]
    }
});
</script>
</body>
</html>

运行结果：
在这里插入图片描述

2）对象形式的列表渲染

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="value, key in object">
            {
   {key}} : {
   { value }}/获取到/对象属性的值和名称
        </li>
    </ul>
</div>
<script type="text/javascript">
var vm = new Vue({
    el : "#app",
    data : {
        object: {//定义对象
            title: 'How to do lists in Vue',
            author: 'Jane Doe',
            time: '2016-04-10'
        }
    }
});
</script>
</body>
</html>