<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
ul{
overflow: hidden;
}
li {
list-style: none;
width: 100px;
height: 50px;
line-height: 50px;
border: 1px solid #000;
float: left;
}
li.active {
color: red;
border-color: red;
}
.box{
border: 1px solid #000;
display: flex;
}
.box p{
flex: 1;
color: red;
}
</style>
</head>
<body>
<div id="app">
<ul>
<li v-for=" (item,index) in tabs"
:key="item.id"
:class="{ 'active': curTab===item.id }"
@click="curTab=item.id">
{{ item.name }}
</li>
</ul>
<!-- v-if 条件为true当前元素才会显示,条件为false不会显示 -->
<!-- 简单的选项卡 -->
<div class="home" v-if="curTab==='home'">首页</div>
<div class="list" v-if="curTab==='list'">列表</div>
<div class="about" v-if="curTab==='about'">关于</div>
<!-- ================================================== -->
<div>
用户名： {{ user.name }}
年龄： {{ user.age }}
<!-- 这个意思是如果user.ishun为true那么久显示拉黑按钮
如果显示为false显示点击获取手机号按钮
v-if v-else
-->
<button v-if="!user.isHun">未婚，点击获取手机号</button>
<button v-else>已婚，拉黑</button>
</div>
<!-- ================================================== -->
<!-- 根据分数选择优秀，良好，及格 -->
<!-- v-if v-else-if v-else -->
<p v-if="score > 90">优秀</p>
<p v-else-if="score > 80">良好</p>
<p v-else-if="score > 60" >及格</p>
<p v-else>差</p>
<!-- ================================================== -->
<!-- 控制三个p标签显示-->
<!-- 可以用一个父元素包括起来这样用父元素来管理3个标签
但是这种方法添加多了一个元素标签有可能会影响到页面布局
打乱样式
如何解决：
（1）改样式
（2）将外层改为template
-->
<div class="box" >
<div v-if="isP">
<p>p1</p>
<p>p2</p>
<p>p3</p>
</div>
</div>
<!-- 该样式 -->
<div class="box" v-if="isP">
<p>改样式</p>
<p>p1</p>
<p>p2</p>
<p>p3</p>
</div>
<!-- 外层套用template -->
<div class="box" >
<template v-if="isP">
<p>外层套用template</p>
<p>p1</p>
<p>p2</p>
<p>p3</p>
</template>
</div>
</div>
</body>
</html>
<script src="/js/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
active: 'active',
// 数据变量
curTab: 'home', //home ||list
user:{
name:'张三',
age:18,
isHun:false
},
score:80,
isP:true,//控制是否显示3个p标签
//数量太多了可以写一个数组
tabs: [{
'id': 'home',
name: '首页'
},
{
'id': 'list',
name: '列表页'
},
{
'id': 'about',
name: '关于'
}
]
}
})
</script>
网友评论