1. v-text
v-text 主要用来更新元素 textContent：
<template>
<div class="hello">
<h1 v-text="msg1"></h1>
<h2>{{ msg2 }}</h2>
</div>
</template>
<script>
export default {
data () {
return {
msg1: 'Hello World!',
msg2: 'Hello World!'
}
}
}
</script>
2. v-html
v-html 与 v-text 区别在于：v-text 输出的是纯文本，而 v-html 会将其当 html 标签解析后再输出：
<template>
<div class="hello">
<div v-text="html1"></div>
<div v-html="html2"></div>
</div>
</template>
<script>
export default {
data () {
return {
html1: "<b style='color:red'>v-html</b>",
html2: "<b style='color:red'>v-html</b>"
}
}
}
</script>
3. v-pre
v-pre 主要用来跳过这个元素和它的子元素编辑过程：
<template>
<div class="hello">
<h1 v-pre>{{ msg }}</h1>
<h2>{{ msg }}</h2>
</div>
</template>
<script>
export default {
data () {
return {
msg: 'Hello World!'
}
}
}
</script>
4. v-cloak
v-cloak 主要用来保持在元素上直到关联实例结束时再进行编译：
<style>
[v-cloak] {
display: none;
}
</style>
<template>
<div class="hello" v-cloak>
<div>{{ msg }}</div>
</div>
</template>
<script>
export default {
data () {
return {
msg: 'Hello World!'
}
}
}
</script>
5. v-once
v-once 主要用来执行一次性插值，当数据改变时，插值处的内容不会更新:
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<h2 v-once>{{ msg }}</h2>
</div>
</template>
<script>
export default {
data () {
return {
msg: 'Hello World!'
}
}
}
</script>
6. v-if
v-if 主要用来做条件判断，Vue 会根据表达式的值的真假条件来渲染元素，在切换时元素及它的数据绑定，组建将被销毁并重建。
<template>
<div class="hello">
<div v-if="ok">
<h1>title</h1>
<p>content 1</p>
</div>
<p>content 2</p>
</div>
</template>
<script>
export default {
data () {
return {
ok: true
}
}
}
</script>
7. v-else
v-else 元素必须紧跟在 v-if 或者 v-else-if 后面，否则将不会被识别。
<template>
<div class="hello">
<a v-if="ok">Yes</a>
<a v-else>No</a>
</div>
</template>
<script>
export default {
data () {
return {
ok: true
}
}
}
</script>
8. v-else-if
v-else-if 元素必须紧跟在 v-if 或者 v-else-if 后面，否则将不会被识别，可用来实现 switch 语句。
<template>
<div class="hello">
<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>No A/B/C</div>
</div>
</template>
<script>
export default {
data () {
return {
type: 'a'
}
}
}
</script>
9. v-show
v-show 是简单地切换元素的 CSS 属性 display， 不支持 <template> ，也不支持 v-else，而 v-if 是“真正的”条件渲染。v-show 有更高的初始渲染开销，而 v-if 有更高的切换开销。故，若要频繁地切换，则使用 v-show；若在运行时条件不太可能改变，则使用 v-if。
<template>
<div class="hello">
<div v-show="ok">Hello!</div>
</div>
</template>
<script>
export default {
data () {
return {
ok: true
}
}
}
</script>
10. v-for
v-for 主要根据遍历数组来进行渲染。
<template>
<div class="hello">
<li v-for="item in items1" :key='item'>
{{ item.text }}
</li>
<li v-for="(value, key, index) in items2" :key='key'>
{{ index }}.{{ key }}:{{ value }}
</li>
<li v-for="n of 10" :key='n'>{{ n }}</li>
</div>
</template>
<script>
export default {
data () {
return {
items1: [
{ text: 'text1' },
{ text: 'text2' }
],
items2:{
text:'text1'
},
number:1
}
}
}
</script>
11. v-bind
v-bind 主要用来动态地绑定一个或多个特性。
<template>
<div class="hello">
<a v-bind:href='url'>百度</a>
<br>
<a :href='url'>Baidu</a>
<div :class='{active:isActive}'>对象语法</div>
<div class='static' :class='{active:isActive,danger:hasError}'>多个属性的对象语法</div>
<div :class='[activeClass,errorClass]'>数组语法</div>
<div :class='[isActive?activeClass:errorClass]'>三元表达式的数组语法</div>
<div :style="{border:activeColor,fontSize:fontSize+'px'}">绑定内联样式</div>
</div>
</template>
<script>
export default {
data () {
return {
url: 'https://www.baidu.com',
isActive:true,
hasError:true,
activeClass:'active',
errorClass:'static',
activeColor:'1px solid #000',
fontSize:30
}
}
}
</script>
12. v-model
v-model 主要用在表单控件元素上创建双向数据绑定。
1) input 绑定
<template>
<div class="hello">
<input v-model="name" />
<h1>Hello, {{ name }}</h1>
</div>
</template>
<script>
export default {
data () {
return {
name: 'World'
}
}
}
</script>
2) textarea 绑定
<template>
<div class="hello">
<p style="white-space: pre-line">{{ message }}</p>
<textarea v-model="name"></textarea>
<h1>Hello, {{ name }}</h1>
</div>
</template>
<script>
export default {
data () {
return {
name: 'World'
}
}
}
</script>
3) checkbox 绑定
<template>
<div class="hello">
<input type="checkbox" id="cbox" value="1" v-model="checked0" />
<span>Check Box: {{ checked0 }}</span>
<br />
<input type="checkbox" id="cbox1" value="1" v-model="checked" />
<label for="cbox1">checkbox1</label>
<input type="checkbox" id="cbox2" value="2" v-model="checked" />
<label for="cbox2">checkbox2</label>
<input type="checkbox" id="cbox3" value="3" v-model="checked" />
<label for="cbox3">checkbox3</label>
<br />
<span>Check Box: {{ checked }}</span>
<br />
</div>
</template>
<script>
export default {
data () {
return {
checked0: false,
checked: []
}
}
}
</script>
4) radio 绑定
<template>
<div class="hello">
<input type="radio" id="radio1" value="1" v-model="picked" />
<label for="radio1">radio1</label>
<input type="radio" id="radio2" value="2" v-model="picked" />
<label for="radio2">radio2</label>
<input type="radio" id="radio3" value="3" v-model="picked" />
<label for="radio3">radio3</label>
<br />
<span>Picked: {{ picked }}</span>
</div>
</template>
<script>
export default {
data () {
return {
picked: ''
}
}
}
</script>
5) select 绑定
<template>
<div class="hello">
<select v-model="selected">
<option>a</option>
<option>b</option>
<option>c</option>
</select>
<span>Selected: {{ selected }}</span>
</div>
</template>
<script>
export default {
data () {
return {
selected: ''
}
}
}
</script>
网友评论