- v-test
渲染元素中的纯文本。
<div id="app">
<p v-text="message"></p>
<!-- 跟下面的效果是一样的 -->
<p>{{message}}</p>
</div>
<script>
new Vue({
el: '#app',
data:{
message:"这里是要显示的内容"
}
})
</script>
注意：v-text直接输出字符串时需要用单引号包含，否则将报错。例如：
<div id="app">
<!-- 注意单引号 -->
<p v-text="'这是要显示的内容'"></p>
</div>
<script>
new Vue({
el: '#app'
})
</script>
- v-html
将html内容解析后输出。
<div id="app" v-html="message"></div>
<script>
new Vue({
el: '#app',
data:{
message: "<div style='background:red;width:50px;height:50px'>123</div>"
}
})
</script>
渲染结果
- v-show
控制元素的显示与隐藏。
<div id="app">
<!-- 将showme的值改为false再试试？ -->
<p v-show="showme">看我显示不显示</p>
</div>
<script>
new Vue({
el: '#app',
data:{
showme: true
}
})
</script>
注意：v-show 只是简单的改变元素的display属性，不管是 true 或 false，页面均存在该元素。
- v-if
条件判断指令，根据其表达式的值的真假决定是否渲染元素。
<div id="app">
<p v-if="iphone">iPhone</p>
<p v-if="xiaomi">小米</p>
<p v-if="huawei">华为</p>
</div>
<script>
new Vue({
el: '#app',
data:{
iphone: true,
xiaomi: false,
huawei: true
}
})
</script>
如果使用一个变量控制多个元素的显示与隐藏，可以使用 <template> 将这些标签包含，如下：
<div id="app">
<!-- 将showme的值改为false再试试？ -->
<template v-if="showme">
<p>我是谁？</p>
<p>我在哪？</p>
<p>我要干什么？</p>
</template>
</div>
<script>
new Vue({
el: '#app',
data:{
showme: true
}
})
</script>
注意：v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 和 v-show 比较：
v-if 和 v-show 比较
如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件不太可能改变，则使用 v-if 较好。
- v-else
v-else 指令之前必须有 v-if 或者 v-else-if 指令，当 if 中的条件的值为假时，即显示 else 中的内容。
<div id="app">
<div v-if="Math.random() > 0.5">
<p>你看得见我</p>
</div>
<div v-else>
<p>你看不见我</p>
</div>
</div>
<script>
new Vue({
el: '#app'
})
</script>
如果判断内容中有多个元素，可以使用 <template> 标签包含：
<div id="app">
<template v-if="Math.random() > 0.5">
<h2>大于0.5显示</h2>
<p>内容A</p>
</template>
<template v-else>
<h2>小于或等于0.5显示</h2>
<p>内容B</p>
</template>
</div>
<script>
new Vue({
el: '#app'
})
</script>
- v-else-if
if..else 只能满足真假两种选择，如果有第三种选择，我们可以使用 else-if 语句。在 vue.js 中，该指令写法为 v-else-if，使用时，前面必须使用过 v-if 或者 v-else-if 指令。
<div id="app">
<p v-if="type == 'iphone'">iPhone</p>
<p v-else-if="type == 'xiaomi'">小米</p>
<p v-else-if="type == 'huawei'">华为</p>
<p v-else>没有相关数据</p>
</div>
<script>
new Vue({
el: '#app',
data:{
type:'xiaomi'
}
})
</script>
- v-for
vue.js 中列表渲染使用 v-for 指令，效果类似 js 中的遍历。
（1）遍历对象
<div id="app">
<ul>
<li v-for="value in object">{{value}}</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
object: {
first: "A",
second: "B",
third: "C"
}
}
})
</script>
遍历时你也可以获取对象的索引和键值：
<div id="app">
<ul>
<li v-for="(value, key, index) in object">这是第{{index+1}}个字母：{{value}}，键为{{key}}</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
object: {
first: "A",
second: "B",
third: "C"
}
}
})
</script>
运行结果.png
（2）遍历数组
栗子1：
<div id="app">
<ul>
<li v-for="(item, index) in items">这是第{{index+1}}个字母：{{item}}</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
items: ['a','b','c','d']
}
})
</script>
运行结果
栗子2：
<div id="app">
<ul>
<li v-for="(item, index) in items">这是第{{index+1}}个字母：{{item.letter}}</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
items: [
{letter: "A"},
{letter: "B"},
{letter: "C"}
]
}
})
</script>
运行结果
（3）遍历中如果要赋值给一组元素，可在 <template> 标签中使用 v-for 指令。
<div id="app">
<template v-for="item in items">
<div>
<h2>{{item.title}}</h2>
<p>{{item.content}}</p>
</div>
</template>
</div>
<script>
new Vue({
el: '#app',
data: {
items: [
{title: "Vue.js 教程", content: '学习vue.js，我们需要掌握···'},
{title: "HTML 教程", content: 'HTML 是前端知识的入门基础···'}
]
}
})
</script>
运行结果
最后：在遍历数组时，你也可以使用 of 代替 in，结果是一样的。
- v-on
绑定事件。
<div id="app">
<button v-on:click="showme">{{message}}</button>
</div>
<script>
new Vue({
el: '#app',
data: {
message: "点击看看"
},
methods: {
showme: function(e){
alert('执行showme方法');
}
}
})
</script>
（1）缩写形式
<!-- 完整语法 -->
<button v-on:click="showme"></button>
<!-- 缩写 -->
<button @click="showme"></button>
（2）内联处理器中的方法：内联语句允许你传递参数到方法中。
<div id="app">
<!--当需要在内联语句处理器中处理原始的 DOM 事件。可以用特殊变量 $event 把它传入方法：-->
<a href="http:://www.mingtern.com" v-on:click="say('hello', $event)">{{message}}</a>
</div>
<script>
new Vue({
el: '#app',
data: {
message: "点击看看"
},
methods: {
say: function(value, e){
e.preventDefault();
alert(value);
}
}
})
</script>
（3）v-on 修饰符
<!-- 阻止浏览器默认事件，此处为阻止 <a> 标签的跳转事件 -->
<a href="http:://www.mingtern.com" v-on:click.prevent="say('hello')">{{message}}</a>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
v-on 支持的修饰符（部分）：
v-on 支持的修饰符
