前端框架Vue------>第一天学习(2) v-if
2024-09-04 08:56:43
API:https://cn.vuejs.org/v2/api/#key
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>
最新文章
- mac,/usr/local is not writable 解决方法
- Android开发学习之路-Palette颜色提取工具类使用
- JMeter学习(三)元件的作用域与执行顺序
- cocos基础教程(5)数据结构介绍之cocos2d::Vector
- Interview-Harry Potter walk through matrix.
- HDU5794 A Simple Chess 容斥+lucas
- Android实例-使用电话拨号器在移动设备上(官方)(XE8+小米2)
- unity3d shader之实时室外光线散射(大气散射)渲染
- 002.AngularJs调用Restful实现CRUD
- copy(source,destination)拷贝文件
- Google调试技巧总结
- C语言复习3_条件结构
- SQL 中使用 WITH AS 提高性能
- (二)Qt窗口应用程序Widget
- yii配置访问路由权限配置
- ASP.NET MVC5+EF6+LayUI实战教程,通用后台管理系统框架(4)- 漂亮的登录界面
- IKVM.NET入门(1)
- Object C学习笔记8-字符串NSString之二
- Bzoj1939 [Croatian2010] Zuma
- 调用jdbc已经写成的方法----jdbc工具类抽取方式二
热门文章
- 6. MGR状态监控 | 深入浅出MGR
- webSocket的基本使用与socket.io库使用
- 基于vue2.0原理-自己实现MVVM框架之computed计算属性
- 开源深度思考 - In Community We Trust
- HCIA-Datacom 3.2 实验二:生成树基础实验
- [PostgreSql]生产级别数据库安装要考虑哪些问题?
- KingbaseES 普通表在线改为分区表案例
- 【android 逆向】arm if
- spark 读取hive 计算后写入hive
- Taurus.MVC-Java 版本打包上传到Maven中央仓库(详细过程):4、Maven项目转换与pom.xml配置