1
前端框架Vue------＞第一天学习（2） v-if
source link: https://blog.51cto.com/u_15740728/5542288
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
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>
<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>
<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>
<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>
<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>
<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>
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK