v-if
<div v-if="type === 'A'">我是A</div>
<div v-else-if="type === 'B'">我是B</div>
<div v-else>不是A/B</div>
v-for
<div v-for="item in listData" :key="item.id">
<p>{{item.name}}</p>
</div>
<div v-for="(item, index) in listData" :key="item.id">
<p>{{index}} - {{item.name}}</p>
</div>
遍历对象
<li v-for="(value, name) in myObject">
{{ name }}: {{ value }}
</li>
<li v-for="(value, name, index) in myObject">
{{ index }}. {{ name }}: {{ value }}
</li>
data() {
return {
myObject: {
title: 'How to do lists in Vue',
author: 'Jane Doe',
publishedAt: '2016-04-10'
}
}
}
v-bind
<!-- 完整语法 -->
<a v-bind:href="url"> ... </a>
<!-- 缩写 -->
<a :href="url"> ... </a>
<!-- 动态参数的缩写 -->
<a :[key]="url"> ... </a>
@click || v-on
<!-- 完整语法 -->
<button v-on:click="doSomething"> ... </button>
<!-- 缩写 -->
<button @click="doSomething"> ... </button>
<!-- 动态参数的缩写 -->
<button @[event]="doSomething"> ... </button>
<!-- 原始的 DOM 事件 -->
<button @click="showMsg('提示参数', $event)">提交</button>
<!-- 这两个 one() 和 two() 将执行按钮点击事件 -->
<button @click="one($event), two($event)">提交</button>
<!-- 阻止单击事件继续冒泡 -->
<button @click.stop="doThis">提交</button>
<!-- 点击事件将只会触发一次 -->
<button @click.once="doThis">提交</button>
v-show
<!--v-show元素会被渲染并保留 DOM 中,只是切换元素的 display -->
<div v-show="ok">Hello!</div>
:class - 绑定 HTML Class
<div class="static" :class="{ active: isActive, 'text-danger': hasError }"
></div>
data() {
return {
isActive: true,
hasError: false
}
}
:style - 绑定内联样式
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data() {
return {
activeColor: 'red',
fontSize: 30
}
}
或者
<div :style="styleObject"></div>
data() {
return {
styleObject: {
color: 'red',
fontSize: '13px'
}
}
}
v-model 表单输入绑定
<!-- 文本 (Text)-->
<input v-model="message" placeholder="edit me" />
<!-- 复选框 (Checkbox)-->
<input type="checkbox" id="checkbox" v-model="checked" />
<!-- 单选框 (Radio)-->
<input type="radio" id="one" value="One" v-model="picked" />
选择框 (Select)
<select v-model="selected">
<option disabled value="">Please select one</option>
<option>A</option>
<option>B</option>
</select>
<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg" />
<!-- 输入值转为数值 -->
<input v-model.number="age" type="text" />
<!-- 过滤首尾空白字符 -->
<input v-model.trim="msg" />
刷新回调
this.nextTick( () => {
console.log('数据已经更新')
});
this.$nextTick( () => {
console.log('页面渲染已经完成')
})
