API：https://cn.vuejs.org/v2/api/#key
文章目录
- 5、条件渲染
-
- 5.1 、 v-if
- 5.2 、 v-else-if
- 6 、列表渲染
- 7 、事件监听
5、条件渲染
5.1 、 v-if
v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。也可以用 v-else 添加一个“else 块”==
实际例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<title>条件渲染</title>
</head>
<body>
<div id="app">
<h1 v-if="myChoose">我是正确条件下显示的内容</h1>
<h1 v-else>我是错误条件下显示的内容</h1>
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
myChoose:true
}
})
</script>
</body>
</html>
AI 代码解读
启动服务器效果
5.2 、 v-else-if
v-else-if，顾名思义，充当 v-if 的“else-if 块”，可以连续使用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<title>if_else_if</title>
</head>
<body style="background-color: pink">
<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>我是其他</div>
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
type:'A'
}
})
</script>
</body>
</html>
AI 代码解读
6 、列表渲染
我们可以用v-for指令基于一个数组来渲染一个列表。v-for 指令需要使用item in items形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<title>列表渲染</title>
</head>
<body style="background-color: pink">
<div id="app">
<ul>
<li v-for="list in lists">
{
{list.message}}
</li>
</ul>
</div>
<script type="text/javascript">
var app =new Vue({
el:"#app",
data:{
lists:[
{message:"北京"},
{message:"上海"},
{message:"河南"}
]
}
})
</script>
</body>
</html>
AI 代码解读
7 、事件监听
可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<title>事件处理</title>
</head>
<body style="background-color: pink">
<div id="app">
<button v-on:click="blue">Blue</button>
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
methods:{
blue:function (event) {
alert("触发了点击按钮事件")
}
}
})
</script>
</body>
</html>
AI 代码解读
传递数值
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<title>事件处理</title>
</head>
<body style="background-color: pink">
<div id="app">
<button v-on:click="blue">Blue</button>
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
message:"Hello Vue"
},
methods:{
blue:function (event) {
alert(this.message)
}
}
})
</script>
</body>
</html>
AI 代码解读
