前端框架Vue------＞第一天学习 v-if
Posted 郑同学要努力呀
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端框架Vue------＞第一天学习 v-if相关的知识，希望对你有一定的参考价值。
API：https://cn.vuejs.org/v2/api/#key
文章目录
- 5、条件渲染
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>
启动服务器效果
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>
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>
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>
传递数值
<!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>
以上是关于前端框架Vue------＞第一天学习 v-if的主要内容，如果未能解决你的问题，请参考以下文章