vue中动态添加style样式的几种写法总结

目录
  • vue动态添加style样式总结
    • 对象
    • 数组
    • 三目运算符
    • 多重值(浏览器会根据运行支持情况进行选择)
    • 绑定data对象
  • vue3的style样式的特性
    • scoped 属性
    • 在 scoped 内部，写全局的样式
    • 通过v-bind 函数，在 CSS 中使用 JavaScript 中的变量

vue动态添加style样式总结

项目中可能会需要动态添加 style 行内样式，但是在长期维护的项目里面，尽量要避免使用。

注意：

1、凡是有 - 的style属性名都要变成驼峰式，比如font-size要变成fontSize。

2、除了绑定值，其他的属性名的值要用引号括起来，比如backgroundColor:'#00a2ff'而不是 backgroundColor:#00a2ff。

对象

html :style="{ color: activeColor, fontSize: fontSize + 'px' }"
html :style="{color:(index==0?conFontColor:'#000')}"

数组

html :style="[baseStyles, overridingStyles]"
html :style="[{color:(index==0?conFontColor:'#000')},{fontSize:'20px'}]"

三目运算符

html :style="{color:(index==0?conFontColor:'#000')}"
html :style="[{color:(index==0?conFontColor:'#000')},{fontSize:'20px'}]"

多重值(浏览器会根据运行支持情况进行选择)

html :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"

绑定data对象

html :style="styleObject"
 
data() {
    return{
      styleObject: {
        color: 'red',
        fontSize: '13px'
      }  
    }
}

vue3的style样式的特性

scoped 属性

定义的 CSS 就只会应用到当前组件的元素上，这样就很好地避免了一些样式冲突的问题。

我们项目中的样式也可以加上如下标签：

<style scoped>
h1 {
  color: red;
}
</style>>

这样，组件就会解析成下面代码的样子。标签和样式的属性上，新增了 data- 的前缀，确保只在当前组件生效。

<h1 data-v-3de47834="">1</h1>
<style scoped>
h1[data-v-3de47834] {
    color: red;
}
</style>

在 scoped 内部，写全局的样式

可以用:global 来标记，这样能确保你可以很灵活地组合你的样式代码

通过v-bind 函数，在 CSS 中使用 JavaScript 中的变量

<template>
  <div>
    <h1 @click="add">{{ count }}</h1>
  </div>
</template>

<script setup>
import { ref } from "vue";
let count = ref(1)
let color = ref('red')
function add() {
  count.value++
  color.value = Math.random()>0.5? "blue":"red"  // 随机生成一个0-1之间点数字
}
</script>

<style scoped>
h1 {
// v-bind 函数绑定 color 的值
  color:v-bind(color);
}
</style>>

点击累加器时文本颜色的切换效果，如下图所示：

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue中的style样式如何动态绑定

    目录 style样式如何动态绑定 动态设置style样式 style样式如何动态绑定 方法一: (1) html中:  <div class="videoMa" ref="videoMa" style="width:100%;height:100%;">  <div id="playWnd" class="playWnd"  :style="{width:videoBox.wid

  • Vue实现动态样式的多种方法汇总

    目录 1. 三元运算符判断 2. 动态设置class 3. 方法判断 4. 数组绑定 5. computed结合es6对象的计算属性名方法 1. 三元运算符判断 <text :style="{color:state?'#ff9933':'#ff0000'}">hello world </text> <script> export default { data() { return { state: true } } } </script>

  • vue 中动态绑定class 和 style的方法代码详解

    先列举一些例子 class="['content',{'radioModel':checkType}]" class="['siteAppListDirNode',{open:appitem.open==true}]" class="['portalCenterMenu',{showNav:!showHideNav,hideNav:showHideNav}]" class="{shortcutMenuShow:!showHideNav,

  • vue中动态添加style样式的几种写法总结

    目录 vue动态添加style样式总结 对象 数组 三目运算符 多重值(浏览器会根据运行支持情况进行选择) 绑定data对象 vue3的style样式的特性 scoped 属性 在 scoped 内部,写全局的样式 通过v-bind 函数,在 CSS 中使用 JavaScript 中的变量 vue动态添加style样式总结 项目中可能会需要动态添加 style 行内样式,但是在长期维护的项目里面,尽量要避免使用. 注意: 1.凡是有 - 的style属性名都要变成驼峰式,比如font-size要

  • vue中动态添加class类名的方法

    vue 动态添加class类名,灵活得让你发狂,下面示例几个 <template> <div> <h2>动态添加类名</h2> <!-- 第一种方式:对象的形式 --> <!-- 第一个参数 类名, 第二个参数:boolean值 --> <!-- 对象的形式: 用花括号包裹起来,类名用引号, --> <!-- 优点: 以对象的形式可以写多个,用逗号分开 --> <p :class="{'p1'

  • 详解如何在Vue中动态添加类名

    目录 静态和动态类 有条件的类名 使用数组语法 使用对象语法 与自定义组件一起使用 快速生成类名 使用计算属性来简化类 能够向组件添加动态类名是非常强大的功能.它使我们可以更轻松地编写自定义主题,根据组件的状态添加类,还可以编写依赖于样式的组件的不同变体. 添加动态类名与在组件中添加 prop :class="classname"一样简单.无论classname的计算结果是什么,都将是添加到组件中的类名. 当然,对于Vue中的动态类,我们可以做的还有很多.在本文中,我们将讨论很多内容:

  • 在vue中动态添加class类进行显示隐藏实例

    如下所示: <div class="status_button"> <el-button type="success" @click="checkSite" >查岗</el-button> <el-button type="danger">视频</el-button> </div> <!-- 查岗部分显示影藏 --> <div class

  • 在vue中动态修改css其中一个属性值操作

    我就废话不多说了,大家还是直接看代码吧~ <template> <!--此div的高度取屏幕可视区域的高度--> <div class="hello" :style="{'height':getClientHeight}"> <h5>{{ msg }}</h5> </div> </template> <script> export default { data() { r

  • Vue中Class和Style实现v-bind绑定的几种用法

    Vue中Class和Style实现v-bind绑定的几种用法

    项目开发中给元素添加/删除 class 是非常常见的行为之一, 例如网站导航都会给选中项添加一个 active 类用来区别选与未选中的样式,除了导航之外其他很多地方也都会用到这种方式处理选中与未选中. 除了设置 class 我们在项目中也经常设置元素的内联样式 style,在 jquery 时代我们大多数都是利用 addClass 与 removeClass 结合使用来处理 class 的添加/删除,利用 css() 方法设置/获取元素的内联样式. 那么在 vue 中 我们如何处理这类的效果呢?

  • vue中动态修改animation效果无效问题详情

    目录 问题描述 问题原因 解决办法 1.将 keyframes 下的内容放到 scoped 的外边 2.去掉scoped 问题描述 鼠标移入移出,并没有出现闪动: <template> <div class="alarmIcon" ref="alarmIcon" @mouseenter="handleEnter" @mouseleave="handleLeave" ></div> </

  • Vue.js动态添加、删除选题的实例代码

    Vue.js动态添加、删除选题的实例代码

    大家先看看页面效果吧,当当当当``````````````````````` 图中第二个选题是小颖点击了"新增选题"按钮,然后出来的,当你点击了"删除选项"或"删除选题"按钮,就会删除相应的选项和选题. html代码 <template> <div class="main-container"> <div class="form-horizontal"> <temp

  • Vue实现动态添加或者删除对象和对象数组的操作方法

    添加核心代码如下: this.data.push({ type: [{ value: '选项1', label: 'in' }, { value: '选项3', label: 'out' }], value:[{ value: '选项1', label: 'CSV' }, { value: '选项3', label: 'TSV' }], parameter:'', default:'', description:'', isDelete:false, }); 删除核心代码如下: /*遍历数组,然

  • Vue中使用 class 类样式的方法详情

    Vue中使用 class 类样式的方法详情

    在vue中为我们提供了 几种方式来使用class类的样式 1. 布尔值 我们先正常在 style 标签中 书写一个类名为 active的样式 <style> .active{ color: red; font-size: 20px; font-style: normal; } </style> 在我们的 script 标签中创建一个 vm 实例,在实例的 data 数据中心写上 isActive:true , true 表示使用此样式,false 则表示不使用 <script

随机推荐