vue2根据class实现布局切换/蓝桥杯：布局切换/

最新推荐文章于 2024-05-20 14:39:27 发布

a易安

最新推荐文章于 2024-05-20 14:39:27 发布

阅读量262

点赞数 4

文章标签：蓝桥杯 javascript css

本文链接：https://blog.csdn.net/2301_77231855/article/details/137009172

版权

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>布局切换</title>
    <script type="text/javascript" src="./js/vue.js"></script>
    <link rel="stylesheet" type="text/css" href="./css/index.css" />
    <script
      src="./js/axios.min.js"
      type="text/javascript"
      charset="utf-8"
    ></script>
  </head>
  <body>
    <div id="app" v-cloak>
      <!-- TODO：请在下面实现需求 -->
      <div class="bar">
        <a class="grid-icon" :class="{active:isGrid}" @click="toggle('grid')"></a>
        <a class="list-icon" :class="{active:!isGrid}" @click="toggle('list')"></a>
      </div>
      <!--grid 示例代码，动态渲染时可删除-->
      <ul :class="{grid:isGrid,list:!isGrid}" v-for="(item,index) in goodsList" :key="index">
        <li>
          <a :href="item.url" target="_blank"> <img :src="item.image.large" /></a>
          <p v-if="!isGrid">从零吃透 Vue.js 框架</p>
        </li>
      </ul>
    </div>
  </body>
</html>
<script type="text/javascript">
  var vm = new Vue({
    el: "#app",
    data: {
      goodsList: [],
      isGrid:true
    },
   async mounted() {
      // TODO：补全代码实现需求
     await axios.get('./goodsList.json').then(res=>{
        console.log(res.data);
        this.goodsList=res.data
      })
    },
    methods:{
      toggle(item){
        console.log(item);
        this.isGrid=item==='grid'
      }
    }
  });
</script>

在Vue.js中，:class 是用来动态绑定元素的class属性的指令。通过使用:class指令，你可以动态地根据数据的值来决定是否应该添加某个特定的类名到元素上。这样的动态绑定使得我们可以根据应用的状态或用户的行为来改变样式。

在你提到的代码中，:class="{grid: isGrid, list: !isGrid}" 用了一个对象语法。在这个对象中，键是类名，值是布尔表达式。如果值为真，那么对应的类名就会被添加到元素上；如果值为假，则不会添加。

因此，:class="{active: isGrid}"和:class="{active: !isGrid}"的作用是根据isGrid的值来决定是否应该添加或移除active类名。这种方式使得我们可以根据isGrid的布尔值来动态地改变元素的样式，从而实现布局切换的功能。

a易安

关注

4
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue2根据class实现布局切换/蓝桥杯：布局切换/

指令，你可以动态地根据数据的值来决定是否应该添加某个特定的类名到元素上。这样的动态绑定使得我们可以根据应用的状态或用户的行为来改变样式。在这个对象中，键是类名，值是布尔表达式。如果值为真，那么对应的类名就会被添加到元素上；如果值为假，则不会添加。的布尔值来动态地改变元素的样式，从而实现布局切换的功能。是用来动态绑定元素的class属性的指令。这种方式使得我们可以根据。的值来决定是否应该添加或移除。
复制链接

扫一扫