一、代码及思路分析
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>