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