3、条件与循环

作者: Rebirth_914 | 来源:发表于2019-03-10 10:47 被阅读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
v-show:适用于频繁的切换条件
列表渲染指令：v-for（用于数组的遍历）

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举例

<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>
        <!-- 通过CDN引入Vue.js -->
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <style type="text/css">
            .container{
                display: flex;
                width: 80%;
                margin: 0 auto;
            }
            .card{
                width: 200px;
                height: 200px;
                margin-right: 30px;
                border: 1px solid #EEE;
                border-radius: 10px;
                text-align: center;
            }
            .card img{
                width: 100%;
                height: 100%;
                border-bottom-left-radius: 10px;
                border-bottom-right-radius: 10px;
            }
            .like{
                color:aquamarine;
                font-weight: bold;
            }
            .nolike{
                color: coral;
            }
            
        </style>
    </head>
    <body>
        <!-- vue-app的根容器 -->
        <div id="app">
            <h2 v-if="show">显示图书信息</h2>
            <div class="container">
                <!-- 通过循环遍历books数组 -->
                <div class="card"v-for="book in books">
                    <!-- 显示图书的名字 -->
                    <h4>{{book.name}}</h4>
                    <!-- 绑定图书的封面属性 -->
                    <img :src="book.cover" />
                    <!-- 判定like的值，显示不同的文字 -->
                    <p class="like" v-if="book.like" >喜欢</p>
                    <p class="nolike" v-else >不喜欢</p>
                </div>
                
            </div>
        </div>
        <script type="text/javascript">
            /* 实例化一个Vue对象 */
            var app = new Vue({
                el: '#app',
                data: {
                    show:true,
                    books:[
                        {
                            name:'Austor',
                            cover:'img/book1.jpg',
                            like:true
                        },
                        {
                            name:'鬼作家',
                            cover:'img/book2.jpg',
                            like:false
                        },
                        {
                            name:'推理竞技场',
                            cover:'img/book3.jpg',
                            like:false
                        },
                        {
                            name:'人鼠之间',
                            cover:'img/book4.jpg',
                            like:true
                        }
                    ]
                }
                    
                
            })
        </script>
    </body>
</html>