v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。
v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

<div id="app1">
           <p v-if="ok">yes</p>
           <p v-else>no</p>
       </div>

var app1 = new Vue({
            el: '#app1',
            data: {
                ok: true
            }
        });

用 key 管理可复用的元素

<div id="app2" class="demo">
          <div>
            <template v-if="loginType === 'username'">
              <label>Username</label>
              <input placeholder="Enter your username" key="username-input">
            </template>
            <template v-else>
              <label>Email</label>
              <input placeholder="Enter your email address" key="email-input">
            </template>
          </div>
          <button @click="toggleLoginType">Toggle login type</button>
        </div>

var app2 = new Vue({
          el: '#app2',
          data: {
            loginType: 'username'
          },
          methods: {
            toggleLoginType: function () {
              return this.loginType = this.loginType === 'username' ? 'email' : 'username'
            }
          }
        });

带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。
注意，v-show 不支持 <template> 元素，也不支持 v-else

<div id="app3">
            <p v-show="show">显示</p>
            <p v-show="hide">隐藏</p>
        </div>

var app3 = new Vue({
            el: '#app3',
            data: {
                show: true,
                hide: false
            }
        });

用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。也可以用 of 替代 in 作为分隔符，因为它是最接近 JavaScript 迭代器的语法。

<!--列表渲染 v-for -->
        <ul id="app4">
            <li v-for="(item,index) in items">
                {{index}}-{{item.message}}
            </li>
        </ul>
        
        <!--一个对象的 v-for-->
        <ul id="app5">
            <li v-for="value of object">
                {{value}}
            </li>
        </ul>
        
        <ul id="app6">
            <li v-for="(value, key) of object">
                {{key}} : {{value}}
            </li>
        </ul>
        
        <ul id="app7">
            <li v-for="(value, key, index) of object">
                {{index}}. {{key}} : {{value}}
            </li>
        </ul>
        
        <!--key的工作方式类似于一个属性，所以你需要用 v-bind 来绑定动态值 (在这里使用简写)-->
        <div v-for="item in items" :key="item.id">
          <!-- 内容 -->
        </div>

        <!-- 也可以用 v-for 通过一个对象的属性来迭代 -->
        <div v-for="(value, name, index) in object">
            {{ index }}. {{ name }}: {{ value }}
        </div>
        
        <ul id="app8">
            <li v-for="value of userProfile">{{value}}</li>
        </ul>

var app4 = new Vue({
            el: '#app4',
            data: {
                items: [
                    { message: 'aaa'},
                    { message: 'bbb'}
                ]
            }
        });
        
        var app5 =  new Vue({
            el: '#app5',
            data: {
                object: {
                    firstName: 'Jones',
                    lastName: 'Due',
                    age: 30
                }
            }
        });
        
        var app6 =  new Vue({
            el: '#app6',
            data: {
                object: {
                    firstName: 'Jones',
                    lastName: 'Due',
                    age: 30
                }
            }
        });
        
        var app7 = new Vue({
            el: '#app7',
            data: {
                object: {
                    firstName : 'Jones',
                    lastName: 'Due',
                    age: 30
                }
            }
        });
        
        var app8 = new Vue({
            el: '#app8',
            data: {
                userProfile: {
                    name: 'zhangsan'
                }
            }
        });
//对于已经创建的实例，Vue 不能动态添加根级别的响应式属性。但是，可以使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性。
        
        //你可以添加一个新的 age 属性到嵌套的 userProfile 对象
        Vue.set(app8.userProfile,'age','30');
        
        //你还可以使用 app8.$set 实例方法，它只是全局 Vue.set 的别名：
        app8.$set(app8.userProfile, 'sex', '男');

变异方法 (mutation method)

Vue 将被侦听的数组的变异方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：

push() pop() shift() unshift() splice() sort() reverse()

变异方法，顾名思义，会改变调用了这些方法的原始数组。相比之下，也有非变异 (non-mutating method) 方法，例如 filter()、concat() 和 slice() 。它们不会改变原始数组，而总是返回一个新数组。