Web刷题记录——布局切换

一、代码及思路分析

1、axios 获取数据

 mounted() {
            // TODO：补全代码实现需求
            // 1、获取数据
            axios.get("./goodsList.json").then(res => {
                console.log(res.data);
                this.goodsList = res.data
            })
        },

2、动态绑定样式

<div class="bar">
                <!--2、 动态渲染
                    （1）动态绑定类  :class="{active:num==0}"
                    （2）点击事件切换菜单显示 @click="num = 0"
                -->
                <a class="grid-icon " :class="{active:num==0}" @click="num = 0"></a>
                <a class="list-icon " :class="{active:num==1}" @click="num = 1"></a>
            </div>

3、v-if 切换显隐

<!-- 3、v-if切换显隐 -->
            <ul class="grid" v-if="num == 0">
                <li v-for="(item,index) in goodsList">
                    <a :href="item.url" :target="item.title"> <img :src="item.image.large" /></a>
                </li>
            </ul>
            <ul class="list" v-else>
                <li v-for="(item,index) in goodsList">
                    <a :href="item.url" :target="item.title"> <img :src="item.image.small" /></a>
                    <p>{{ item.title}}</p>
                </li>
            </ul>

二、知识点

1、vue中动态绑定样式

（1）对象形式

<div :class="{ active: isActive }"></div>

【说明】：上面的语法表示 active 是否存在取决于数据属性 isActive 的真假值。

（2）数组形式

data() {
  return {
    activeClass: 'active',
    errorClass: 'text-danger'
  }
}

 a、渲染结果：

<div :class="[activeClass, errorClass]"></div>

b、条件渲染：

<div :class="[isActive ? activeClass : '', errorClass]"></div>

【说明】：errorClass 会一直存在，但 activeClass 只会在 isActive 为真时才存在。

可以借助对象形式简化：

<div :class="[{ active: isActive }, errorClass]"></div>

2、vue条件渲染

// 小例子 实现点击切换显隐
<button @click="awesome = !awesome">Toggle</button>

<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no 😢</h1>