3 条件与循环

作者: 陶然然_niit | 来源:发表于2019-03-06 14:00 被阅读0次

3、条件与循环
3、条件与循环
3 条件与循环
3、条件与循环
3 条件与循环
2018-05-15 第九天
3.2循环结构
控制流程（if、三目、while、for）（2018-11-20
11、MySQL存储过程条件语句
条件与循环

条件渲染指令： v-if、v-else-if、v-else：可以根据表达式的值在DOM中渲染或销毁元素/组件,与v-show不同的是，v-if是真正的条件渲染，适合条件不经常变更的场景；而v-show只是简单的CSS属性切换，使用于频繁切换条件。

v-if举例：

<div id = "app">
    <p v-if="status === 1">当status为1时显示该行</p>
    <p v-else-if="status === 2">当status为2时显示该行</p>
    <p v-else>否则显示该行</p>
</div>
<script>
 var app = new Vue({
     el : '#app',
     data:{
       status:1
    }
})
</script>

v-show举例：

<div id = "app">
    <p v-show="status === 1">当status为1时显示该行</p>
</div>
<script>
 var app = new Vue({
     el : '#app',
     data:{
       status:2
    }
})
</script>

列表渲染指令：v-for：当需要将一个数组遍历或枚举一个对象循环显示时，会用到列表渲染指令v-for，结合in来使用

举例：

<div id = "app">
    <ul>
       <li v-for="book in books">
          {{book.name}}
      </li>
    </ul>
</div>
<script>
  var app = new Vue({
      el : '#app',
      data:{
         books:[
           { name : 'Vue.js'},
           { name : 'JavaScript'},
           { name : 'HTML5+CSS3'},
          ]
     }
})
</script>

条件与循环结合的一个综合例子：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Vue.js条件与循环</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <style type="text/css">
            #app {
                width: 80%;
                margin: 0 auto;
            }

            .container {
                display: flex;
            }

            .card {
                width: 200px;
                height: 200px;
                border: 1px solid #eee;
                border-radius: 10px;
                margin-right: 30px;
                text-align: center;
            }

            .card img {
                width: 100%;
                height: 100%;
                border-bottom-left-radius: 10px;
                border-bottom-right-radius: 10px;
            }
            .like{
                color: green;
            }
            .no-like{
                color: red;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <h2 v-if="show">显示书籍信息</h2>
            <div class="container">
                <div class="card" v-for="book in books">
                    <h4>{{book.name}}</h4>
                    <img :src="book.cover">
                    <!-- <p v-if="book.like">喜欢</p> -->
                    <p v-if="book.like === true" class="like">喜欢</p>
                    <p v-else class="no-like">不喜欢</p>
                </div>
            </div>
        </div>
        <script>
            var app = new Vue({
                el: '#app',
                data: {
                    show: true,
                    books: [{
                            name: '时间的礼物',
                            cover: 'https://img1.doubanio.com/view/subject/m/public/s29951659.jpg',
                            like: true
                        },
                        {
                            name: '显微镜下的大明',
                            cover: 'https://img3.doubanio.com/view/subject/m/public/s29960161.jpg',
                            like: false

                        },
                        {
                            name: '夏摩山谷',
                            cover: 'https://img3.doubanio.com/view/subject/m/public/s29967206.jpg',
                            like: true

                        },
                        {
                            name: '642件可写的事',
                            cover: 'https://img3.doubanio.com/view/subject/m/public/s29953545.jpg',
                            like: false
                        }
                    ]
                }
            })
        </script>
    </body>
</html>

运行结果