探索vue框架的世界: 内部、外部样式和内联样式动态绑定的方法

在实际项目中,经常会遇到这样的场景,可以通过逻辑层中设定的变量,在视图层中来呈现不同的样式,那么这种动态绑定样式的方式如何实现呢?

本篇文章,博主将和大家分享动态绑定内联样式style 和 动态绑定内部和外部样式class 的几种常用的方法。 希望走过路过的客观多多指教,并使用您发财的小手留下您宝贵的肯定👍👍👍🤞。

注意:测试以vue2.0的选项式写法为例,首先,在逻辑层的data中预置变量

javascript 复制代码
 export default{
		 name:'',
		 data(){
			 return{
			     activeId:1,
			     activeAvatarName:'dongdong',
				 classObj:{
					 active:true,
					 disabled:false
				 },
				 isActive:true,
				 isRefresh:true,
				 activeColor:'red',
				 width:16,
				 activeStyles:{
					color:'red',
					fontSize:'14px'
				 },
				 otherStyles:{},	
				 boxColor:'red'
				 
			 }
		 },
		 computed:{
			 classObj:function(){
				 return {
					 active:this.isActive,
					 refresh:this.isRefresh
				 }
			 }
		 }
	 }

一、动态绑定内联样式 style

👉1.1、对象方式绑定

  • 方式1 :对象中使用变量赋值

    javascript 复制代码
    <div :style="{color:activeColor,width:width+'px'}"></div>
  • 方式2:对象中使用三目运算符

    javascript 复制代码
    <div :style="{color:(index==16?activeColor:'#000')}"></div>

👉1.2、数组方式绑定

  • 方式1:数组中实现全部的动态绑定

    javascript 复制代码
    <div :style="[activeStyles,otherStyles]"></div>
  • 方式2:数组中可以实现部分动态绑定,部分静态赋值

    javascript 复制代码
    <div :style="[{color:(index==16?activeColor:'#000')},{fintSize:'18px'}]"></div>

👉1.3、三目运算符方式绑定

  • 方式1:三目运算可以写在括号中,也可以删除括号

    javascript 复制代码
    <div :style="{color:(index==1?boxColor:'#000')}"></div>
      <div :style="{color:index==1?boxColor:'#000'}"></div>
  • 方式2:数组中使用三目运算,需要写在对象中

    javascript 复制代码
    <div :style="[{color:(index==1?boxColor:'#000')},{pointer-events:'none'}]"></div>
  • 方式3:也可以字符串的方式书写三目运算

    javascript 复制代码
    <div :style="item.avatarName===activeAvatarName?'font-weight:700':'font-weight:400'"></div>

二、动态绑定内外部样式 class

2.1、对象方式绑定

  • 类的名称一般都是用字符串,比如active , 以下表达式判断元素是否绑定一个名叫active的类

    javascript 复制代码
    <div :class="{'active':isActive}"></div>
    <div :class="{'active':boxColor=='red'">{{name}}</div>
    <div :class="{'active':activeId==item.uid}"{{item.userName}}</div>
  • 可判断并绑定多个类,用逗号隔开

    javascript 复制代码
    <div :class="{'active':isActive,'refresh':isRefreshr}"></div>
  • 可放在data里,造一个对象出来

    javascript 复制代码
    <div :class="classObj">{{name}}</div>
  • 使用computed属性 根据data里的值变化

    javascript 复制代码
    <div :class="classObject">{{name}}</div>

2.2、数组方式绑定

  • 使用单纯的数组

    javascript 复制代码
    <div :class="[isActive,isRefresh]">{{userName}}</div>
  • 数组与三目运算符相结合,注意,动态绑定的style,三目运算只能写在对象中,而数组方式动态绑定的class,可以在数组中使用三目运算

    javascript 复制代码
    :class="[isActive?'active':'']"
  • 元素需要的类名一定要加" " 双引号,如果这个类名写在对象中可以不加

    javascript 复制代码
    :class="[{active:isActive},'disabled']" 
相关推荐
zwjapple44 分钟前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
像风一样自由20203 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem4 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊4 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术4 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
幽络源小助理4 小时前
SpringBoot基于Mysql的商业辅助决策系统设计与实现
java·vue.js·spring boot·后端·mysql·spring
GISer_Jing4 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止4 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall4 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴4 小时前
简单入门Python装饰器
前端·python