p12 条件渲染v-if与v-show
v-show 会在 DOM 渲染中保留该元素；v-show 仅切换了该元素上名为 display 的 CSS 属性。
v-show 不支持在 v-else 搭配使用。
<template>
<h1 v-if="user == 'vip'">欢迎会员登录h1>
<button @click="toggleUser">vip过期button>
<h1 v-show="isShow">切换显示内容h1>
<button @click="toggleShow">切换button>
template>
<script>
export default {
data() {
return {
user: "vip",
isShow: true,
num: 1,
};
},
methods: {
toggleUser() {
if (this.num % 2 !== 0) {
this.user = "!vip";
} else {
this.user = "vip";
}
this.num++;
},
toggleShow() {
this.isShow = !this.isShow;
},
},
};
script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
p13 列表渲染v-for
<template>
<ol>
<li v-for="(item, index) in news" :key="index">{
{ item }}li>
ol>
<ul>
<li v-for="(item, index) in newsObj" :key="index">
{
{ item.title }} {
{ item.tag }} {
{ item.num }}
li>
ul>
<ol>
<li v-for="(item, i) in person" :key="i">{
{ item }}li>
ol>
<ul>
<li v-for="(item, i) of person" :key="i">{
{ item }}li>
ul>
template>
<script>
export default {
data() {
return {
news: [
"#怎样才能释怀曾经深爱的人#",
"#你会因为什么原因换手机#",
"#怎样才是有效化妆#",
"#你有彻底改变生活方式的勇气吗#",
],
newsObj: [
{
title: "#怎样才能释怀曾经深爱的人#",
tag: "沸",
num: "450万",
},
{
title: "你有彻底改变生活方式的勇气吗#",
tag: "沸",
num: "45万",
},
],
person: {
name: "zhagnsan"
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
