模板语法
- v-html
将vue实例中的数据通过html格式渲染出来，可以解析一些内在样式
- v-if
根据真价值判断是否显示
- v-else-if
充当v-if块，可以连续使用
- v-else
v-if的补充
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
- v-show
功能与v-if类似,如果切换频繁则可以使用show,如果运行时条件很少变动则使用v-if比较好
- v-bind/:特性
将bind后面的特性绑定至当前标签上
<!--初始版本将特性写死在了标签上-->
<a v-bind:href="url">...</a>
<div v-bind:id="dynamicId"></div>
<!--vue2.6.0之后可以动态绑定特性-->
<!--attribute为vue实例data里面的数据值-->
vue.data.attributeName = href;
<a v-bind:[attributeName]="url"> ... </a>
- v-on:click/@click
点击该元素触发相应事件
- v-for
通过循环渲染出数据
new Vue({
el: '#v-for-object',
data: {
object: {
title: 'vue study',
author: 'ksk',
publishedAt: '2019-5-18'
}
}
})
<!--在这里,value为具体键值,name为健名,index为索引值-->
<div v-for="(value, name, index) in object" v-bind:key="index">
{{ index }}. {{ name }}: {{ value }}
</div>
<!--显示为-->
0.title: vue study
1.author: ksk
2.publishedAt: 2019-5-18
当数组或者对象产生更新时，vue渲染出的视图往往不会随之更新，而需要我们去维护更新，在这里有以下几个函数可以对其进行更新维护
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()
v-model
在类似于表单input,textarea,select元素上创建双向数据绑定
new Vue({
el: '#v-for-object',
data: {
message: "刺激哦，小老弟！",
checkdNames: [],
picked: '',
selected: ''/[]
}
})
<!--输入框-->
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
<!--单个复选框-->
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
<!--多个复选框，绑定到同一数组-->
<div id='example-3'>
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>
</div>
<!--单选按钮-->
<div id="example-4">
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>Picked: {{ picked }}</span>
</div>
<!--选择按钮-->
<div id="example-5">
<select v-model="selected">
<option disabled value="">请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{ selected }}</span>
</div>
