<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>
6. v-if和v-show
v-if是组件的销毁和重建，如果初始条件为false，则什么都不做，直到变为真，所以切换开销高，运行条件很少改变时适用
v-show是display:none和block之间的CSS切换，基于渲染，不管初始条件如何都会渲染，所以初始渲染开销高，切换频率高时适用
7. v-for
可使用in或者of
也可遍历对象：v-for=”(value, key, index) in obj”
可根据template渲染多个组合元素：
<ul>
<template v-for="item in items">
<li>{{ item.msg }}</li>
<li class="divider"></li>
</template>
</ul>8. v-for和v-if
v-for优先级更高，所以v-if会重复运行于每个v-for循环中，所以尽量不要一起使用，可先使用计算属性对数据进行过滤再遍历。
9. 更改响应式数据
Vue.set(object, key, value)
this.$set(object, key, value)
this.items.splice(index, 1, newValue)
批量添加属性：
// 不要直接Object.assign(this.items, {age: 18}
this.items = Object.assign({}, this.items, {
age: 18,
favoriteColor: 'Vue Green'
})10. 事件修饰符
.passive：滚动的默认事件会立即出发，即告诉浏览器不想阻止默认事件的触发，可提升移动端性能
<div :scroll.passive="onScroll">...</div> .capture：添加事件监听器时使用事件捕获模式，即元素自身触发的事件先在此处理，然后才交由内部元素进行处理
.self：只当在 event.target 是当前元素自身时触发处理函数，即事件不是从内部元素触发的
.once：点击事件只会触发一次
键盘修饰符：<input v-on:keyup.enter=”submit”>
11. v-model
选择框
<!-- 单选框时，picked为字符串 "a"，不是布尔值 -->
<input type="radio" value="a" v-model="picked"><!-- 多选框时，toggle默认值设为字符串或布尔值时得到布尔值，设为数组时得到的是value值-->
<input type="checkbox" value="b" v-model="toggle">
<!-- 当选中第一个选项时，selected为字符串value的值 "abc" -->
<select v-model="selected">
