当前位置:主页 > vue > vue动态绑定样式

vue动态绑定样式

xi3年前 (2021-11-11)vue3580


每次点击方块时通过三元表达式,改变对应的class,每一个不同的class对应不同的样式,从而通过改变class实现样式的切换。

<template>
  <div class="container">
    <!--通过三元表达式选择class使用对应的样式-->
    <div
      v-for="item in list"
      :key="item"
      :class="current == item ? 'current' : 'style-test'"
      @click="styleTest(item)"
    ></div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
      current: "", //代表当前点击的项目
    };
  },
  mounted() {
    //默认点击第一项
    this.styleTest(this.list[0]);
  },
  methods: {
    //点击后改变当前项目
    styleTest(item) {
      this.current = item;
    },
  },
};
</script>
<style scoped>
.container {
  text-align: center;
}
.style-test,
.current {
  /*未点击的项目*/
  display: inline-block;
  height: 50px;
  width: 50px;
  background-color: #77b2ec;
  margin: 10px;
  cursor: pointer;
}
.current {
  /*点击的项目*/
  background-color: #41b883;
  box-shadow: 5px 5px 10px white;
}
</style>
转载请标注来源与原作者

本文链接:https://xiblogs.top/?id=24

“vue动态绑定样式” 的相关文章

vuex的使用

vuex的使用

vuex是什么vuex是一个专门为vue开发的状态管理工具,它采用集中式存储管理应用的所有组件的状态,其核心是state。 vuex中有什么state:存放状态数据的地方,其中数据是响应式的,数据改...

vscode使用vue代码模板

vscode使用vue代码模板

1、vscode中打开:文件>首选项>用户片段>输入vue按下回车2、复制下面代码并保存。 { "Print to console": {...

vue自定义组件的点击事件失效

vue自定义组件的点击事件失效

在vue开发过程中为了减少重复代码,很多时候都需要将重复的部分写成一个组件,方便调用。但是使用组件时很可能又会给该组件添加点击事件。如果直接这样写,事件则会失效:正确写法应该是这样:...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。