1、条件渲染指令v-show v-if
1.1v-show是通过改变样式来控制显示效果
<div v-show="isShow">测试v-show</div>
1.2v-if是通过移除添加结构来控制显示效果
<div v-if="isShow">测试v-if</div>
v-if一般通过和v-else-if v-else来一起使用
<div v-if="num<=18">18-</div>
<div v-else-if="num<=50">50-</div>
<div v-else>50+</div>
1.3案例
<template>
<div id="app">
<h3>案例:折叠面板</h3>
<div>
<div class="title">
<h4>芙蓉楼送辛渐</h4>
<!-- 1.绑定点击事件 -->
<span class="btn" @click="isShow=!isShow">
{{isShow?'收起':'展开'}}
</span>
</div>
<!-- 2. v-show配合变量来控制标签隐藏出现 -->
<div class="container" v-show="isShow">
<p>寒雨连江夜入吴,</p>
<p>平明送客楚山孤。</p>
<p>洛阳亲友如相问,</p>
<p>一片冰心在玉壶。</p>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
isShow: true
}
}
}
</script>
<style lang="less">
body {
background-color: #ccc;
#app {
width: 400px;
margin: 20px auto;
background-color: #fff;
border: 4px solid blueviolet;
border-radius: 1em;
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
padding: 1em 2em 2em;
h3 {
text-align: center;
}
.title {
display: flex;
justify-content: space-between;
align-items: center;
border: 1px solid #ccc;
padding: 0 1em;
}
.title h4 {
line-height: 2;
margin: 0;
}
.container {
border: 1px solid #ccc;
padding: 0 1em;
}
.btn {
/* 鼠标改成手的形状 */
cursor: pointer;
}
}
}
</style>
2、v-for循环渲染指令
循环的时候需要加key 对应的值如果有id使用id 没有id用index
key的值的选择条件:固定+唯一
2、1循环数组
<div v-for="(item, index) in arr" :key="index">
{{ item }} {{ index }}
</div>
2、2循环数组对象
<div v-for="item in arr2" :key="item.id">
<div>{{ item.id }}</div>
<div>{{ item.name }}</div>
<div>{{ item.age }}</div>
</div>
2、3循环对象
<div v-for="(value, key) in obj" :key="key">
<div>{{ key }}--{{ value }}</div>
</div>
2、4循环字符串
<div>
<div v-for="(item, index) in str" :key="index">{{ item }}</div>
</div>
2、5循环1-100
<div>
<div v-for="i in 100" :key="i">{{ i }}</div>
</div>