跨境派

跨境派

跨境派,专注跨境行业新闻资讯、跨境电商知识分享!

当前位置:首页 > 工具系统 > 防关联工具 > 前端魔法:掌握动态 class,让网页元素随心所欲

前端魔法:掌握动态 class,让网页元素随心所欲

时间:2024-04-01 08:20:41 来源:网络cs 作者:胡椒 栏目:防关联工具 阅读:

标签: 随心  掌握  动态 

前言

当你动态的添加类名,在某个变量匹配需求时自动切换到某个类名,实现其对应的效果。这个过程就是我们常说的动态 class,今天就和大家一起聊聊前端中的动态 class


一、对象语法

1.1 绑定单个 class

我们可以传给 v-bind:class 一个对象,以动态地切换 class,如下案例:

<template>  <div>    <el-button @click="clickOn" v-bind:class="{'active':isActive}">点击我</el-button>  </div></template><script>export default {  data() {    return {      isActive: true,    };  },  methods: {    clickOn() {      this.isActive = !this.isActive;    },  },};</script><style scoped>.active {  color: red;}</style>

实现效果

在这里插入图片描述


1.2 绑定多个 class

对象中也可存在多个属性,动态切换 class,并且 :class 可以合 class 共存,如下案例:

<template>  <div>    <div class="activeOne" v-bind:class="{ activeTwo: isActive, 'activeThree': hasError }"></div>  </div></template><script>export default {  data() {    return {      isActive: true,      hasError: true,    };  },};</script>

渲染结果

在这里插入图片描述


1.3 绑定计算属性

:class 的表达式过长或逻辑复杂时,可以绑定一个计算属性,一般当条件多于两个时,都可以使用 data 或者 computed,如下案例:

<template>  <div>    <div :class="taxonOne">内容内容内容</div>  </div></template><script>export default {  data() {    return {      isActive: true,      isError: null,      error: {        type: "fail",      },    };  },  computed: {    taxonOne() {      return {        taxonTwo: this.isActive && this.error == null, // (isActive 为 true 且 error 为 null) 类名为 taxonTwo        taxonTherr: this.error && this.error.type == "fail", // (error 不为空且 error 中的 type 值为 "fail") 类名为 taxonTherr      };    },  },};</script><style scoped>.taxonTwo {  color: red;}.taxonTherr {  color: blue;}</style>

渲染结果

在这里插入图片描述


二、数组语法

2.1 class 列表

当需要应用多个 class 时,可以使用数组语法,给 :class 绑定一个数组,如下案例:

<template>  <div>    <div v-bind:class="['taxonOne', 'taxonTwo']">内容内容内容</div>  </div></template><style scoped>.taxonOne {  color: red;}.taxonTwo {  border: 1px solid blue;}</style>

渲染结果

在这里插入图片描述


2.2 三元运算符

使用三元表达式,根据条件切换 class,如下案例:

<template>  <div>    <div v-bind:class="[isActive ? 'taxonOne' : 'taxonTwo']">内容内容内容</div>  </div></template><script>export default {  data() {    return {      isActive: false,    };  },};</script><style scoped>.taxonOne {  color: red;}.taxonTwo {  color: blue;}</style>

isActivetrue 时的渲染结果

在这里插入图片描述

反之,当 isActivefalse 时的渲染结果

在这里插入图片描述


2.3 数组语法 + 对象语法

class 有多个条件时,这样写较为烦琐,可以在数组语法中使用对象语法,如下案例:

<template>  <div>    <div v-bind:class="[{ taxonOne: isActive }, 'taxonTwo']">内容内容内容</div>  </div></template><script>export default {  data() {    return {      isActive: true,    };  },};</script><style scoped>.taxonOne {  border: 1px solid red;}.taxonTwo {  color: blue;}</style>

渲染结果

在这里插入图片描述


三、复合形式

你可以将 v-if/v-else-if:class 相结合进行使用,如下案例:

<template>  <div>    <div v-if="state == '0'" class="taxonOne">内容内容内容</div>    <div v-else-if="state == '1'" class="taxonTwo">内容内容内容</div>  </div></template><script>export default {  data() {    return {      state: "0",    };  },};</script><style scoped>.taxonOne {  color: red;}.taxonTwo {  color: blue;}</style>

state0 时,渲染结果

在这里插入图片描述

state1 时,渲染结果

在这里插入图片描述


:style

除了上面我们说到的动态 class,我们也可以直接动态的绑定 style ,下面一起来看看如何在标签中绑定内联样式。

注意:

凡是有 -style 属性名都要变成驼峰式,比如 font-size 要变成 fontSize;除了绑定值,其他的属性名的值要用引号括起来,比如 fontSize:'14px' 而不是 fontSize:14px

一、 对象形式

1.1 直接绑定

这也是最简单的一种形式,直接绑定,如下案例:

<template>  <div>    <div :style="{ color: activeColor, fontSize: fontSize + 'px' }">内容内容内容</div>  </div></template><script>export default {  data() {    return {      activeColor: "red",      fontSize: 30,    };  },};</script>

渲染结果

在这里插入图片描述


1.2 三目运算符

三目运算符主要针对变量会动态变化时切换不同的 style 会比较方便,如下案例:

<template>  <div>    <div :style="{ color: state == '0' ? 'red' : 'blue'}">内容内容内容</div>    <div :style="state == '1' ? 'color:red' : 'color:blue'">内容内容内容</div>  </div></template><script>export default {  data() {    return {      state: "0",    };  },};</script>

渲染结果

在这里插入图片描述


1.3 计算属性

当逻辑比较复杂时,可以通过绑定一个计算属性,如下案例:

<template>  <div>    <div :style="styleState(0)">内容内容内容</div>  </div></template><script>export default {  data() {    return {};  },  computed: {    styleState() {      return function (index) {        return index == 0 ? "color: red" : "color: blue";      };    },  },};</script>

渲染结果

在这里插入图片描述



二、 数组形式

2.1 直接绑定

<template>  <div>    <div :style="[styleOne, styleTwo]">内容内容内容</div>  </div></template><script>export default {  data() {    return {      styleOne: {        border:"1px solid blue"      },      styleTwo: {        color: "red",      },    };  },};</script>

渲染结果

在这里插入图片描述


2.2 三目运算符

<template>  <div>    <div :style="[{color:(state == '0' ? 'red' : 'blue')}]">内容内容内容</div>  </div></template><script>export default {  data() {    return {      state: "0",    };  },};</script>

渲染结果

在这里插入图片描述


三、调用方法

同样,你也可以选择调用一个方法,如下案例:

<template>  <div>    <div :style="setStyle(0)">内容内容内容</div>  </div></template><script>export default {  data() {    return {};  },  methods: {    setStyle(index) {      return index == 0 ? "color: red" : "color: blue";    },  },};</script>

渲染结果

在这里插入图片描述


拓展

以上我们展示的都是在 vue 中使用,那在别的平台该如何使用呢?其实是大同小异的,可能在语法上会有一点点的不同,下面来看看在 uniapp 和微信小程序中如何使用动态 class


uniapp 中的动态 class

:class="[{'类名':条件},{'类名':条件},{'类名':条件}]"

<template><view><view :class="[{'taxonOne' : index == '0'},{'taxonTwo' : index == '1'}]">内容内容内容</view></view></template><script>export default {data() {return {index: "0"}},}</script><style scoped>.taxonOne {color: red;}.taxonTwo {color: blue;}</style>

index0 时,渲染结果

在这里插入图片描述

index1 时,渲染结果

在这里插入图片描述


微信小程序中的动态 class

index.wxml

<view class="{{ state == '0' ? 'taxonOne' : 'taxonTwo' }}">内容内容内容</view>

index.js

Page({    data: {        state: '1'    },})

index.wxss

.taxonOne{    color: red;}.taxonTwo{    color: blue;}

state0 时,渲染结果

在这里插入图片描述

state1 时,渲染结果

在这里插入图片描述

本文链接:https://www.kjpai.cn/news/2024-04-01/151825.html,文章来源:网络cs,作者:胡椒,版权归作者所有,如需转载请注明来源和作者,否则将追究法律责任!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。

文章评论