1.条件渲染（v-if、v-else-if、v-else）

与JavaScript的条件语句if、else、else if类似，Vue.js的条件指令可以根据表达式的值在DOM中渲染或销毁元素/组件，例如：

<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="dislike" v-else>不喜欢</p>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            // 实例化一个vue对象
            var app = new Vue({
                el: '#app',
                data: {
                    show: true,
                    books:[
                        {
                            name:'奥丽芙·基特里奇',
                            cover:'img/book1.jpg',
                            like:true
                        },
                        {
                            name:'到未来去',
                            cover:'img/book2.jpg',
                            like:true
                        },
                        {
                            name:'认知尺度',
                            cover:'img/book3.jpg',
                            like:false
                        },
                        {
                            name:'摇摆',
                            cover:'img/book4.jpg',
                            like:false
                        }
                    ]
                }
            })
        </script>

结果:

image.png

• v-if与v-show的区别:v-if若表达式初始值为false,则一开始元素就不会被渲染，只有当条件第一次变为真时才开始编译。v-show无论条件真与否，都会被编译。
  相比之下，v-if更适合条件不经常改变的场景，而v-show适用于频繁切换条件

2.列表渲染指令(v-for)

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

<div id="app">
            <ul>
                <li v-for="book in books">{{book.name}}</li>
            </ul>
        </div>
        <script type="text/javascript">
            var app=new Vue({
                el:'#app',
                data:{
                    books:[
                        {
                            name:'《Vue.js实战》'
                        },
                        {
                            name:'《JavaScript》'
                        },
                        {
                            name:'《Javascript高级程序设计》'
                        }
                    ]
                }
            })
        </script>

结果为：

image.png