Vue框架学习篇(二)
1 判断指令(v-if)
1.1 示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../js/vue.js"></script>
<title>v-if条件判断</title>
</head>
<body>
<div id="app">
<div v-if="loginStatus">已登录</div>
<div v-else="loginStatus">未登录</div>
</div>
<script>
var v=new Vue({
el:"#app",
data:{
loginStatus:false
}
})
</script>
</body>
</html>
1.2 运行截图
1.2.1 首次进入页面时
1.2.2 通过console使得loginStatus变更成true后的界面
2 循环显示数据
2.0 语法
v-for="循环元素 in 数组名" (不含下标的写法)
v-for="(循环元素,数组下标) in 数组名" (带上下标的写法)
2.1 普通数组
2.1.1 示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>普通数组循环展示数据</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<h3>普通数组循环</h3>
<ul>
<li v-for="g in games">{{g}}</li>
</ul>
</div>
<script>
var v=new Vue({
el:'#app',
data:{
games:['英雄联盟','王者荣耀','梦幻西游']
}
})
</script>
</body>
</html>
2.1.2 运行截图
2.2 json对象数组
2.2.1 示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>json数组循环演示</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<h3>json数组循环</h3>
<table border="1">
<tr>
<th>序号</th>
<th>编号</th>
<th>商品名</th>
</tr>
<tr v-for="(p,i) in product">
<th>{{i+1}}</th>
<th>{{p.id}}</th>
<th>{{p.name}}</th>
</tr>
</table>
</div>
<script>
var v=new Vue({
el:'#app',
data:{
product:[
{
id:'10',name:'电脑'
},
{
id:'20',name:'鼠标'
},
{
id:'30',name:'键盘'
},
]
},
})
</script>
</body>
</html>
2.2.2 运行截图
