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

vue动态绑定样式

xi3年前 (2021-11-11)vue4540


每次点击方块时通过三元表达式,改变对应的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动态绑定样式” 的相关文章

vue组件间传值

父传子利用props传值,子组件中规定props数据类型,然后父组件使用子组件时需要绑定数据在子组件上:父组件: <template> <div class="pa...

vue中按需引入Element-ui

vue中按需引入Element-ui

安装1、安装element-ui:npm i element-ui -S。2、安装babel-plugin-component:npm install babel-plugin-component -...

发表评论

访客

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