Vue.js中对css的操作（修改）具体方式详解
使用v-bind：class或者v-bind:style或者直接通过操作dom来对其样式进行更改；
1.v-bind:class || v-bind:style
其中v-bind是指令，: 后面的class 和style是参数，而class之后的指在vue的官方文档里被称为'指令预期值'（这个不必深究，反正个人觉得初学知道他叫啥名有啥用就好了）同v-bind的大多数指令（部分特殊指令如V-for除外）一样，除了可以绑定字符串类型的变量外，还支持一个单一的js表达式，也就是说v-bind：class的'指令预期值'除了字符串以外还可以是对象或者数组（‘v-bind：'中的v-bind可省略）。
1.1:对象语法：
通过对象来绑定v-bind:class=“{'css类名':控制是否显示（true or false)}”
<template>
<div>
<div class='mycolor' :class="{'colordisplay':display}"><span>1.1我的对象更改&&绑定test</span></div>
</div>
</template>
<script>
export default {
name: 'mytest',
data() {
return {
display: true
}
},
mounted() {},
computed: {},
methods:{}
}
</script>
<style>
.colordisplay {
display: inline;
background: red;
border: 1px solid blue
}
</style>
如果display为true，那么此时该部分的class就是 class="mycolor colordisplay",通过设置display的值就可以控制colordisplay的显示
如果要设置绑定多个class的话就和正常的对象键值对一样中间用逗号隔开就可以了v-bind:class="{'colordisplay':display,'ispay':pay}"
1.2:内联样式：
v-bind:style='mycolor'
template
<div :style='mypagestyle'><span>1.2我的样式内联更改&&绑定test</span></div>
data
mypagestyle:{color: 'yellow',background:"blue"},
1.3:数组语法：
也可以通过数组来绑定v-bind:style='[mycolor1,mycolor2]'
<div :style="[myarr,myarrtest]"><span>1.3我的数组更改&&绑定test</span></div>
然后设置返回的数据为
myarr:{color: 'white'},
myarrtest:{background:'#000',display:'inline'},
2.计算属性
也可以通过计算属性计算（适用于较为复杂判断）样式
<div class='computed' :class='compuretu'>2.计算属性判断</div>
将计算属性的返回值作为类名，通过判断serd和slid的值来控制样式的显示与否
data() {
return {serd:true,slid:true}
},
computed: {
compuretu: function() {
return {compuretu: this.serd && this.slid}
}
}
设置样式
.compuretu{color:white;background: red}
3.操作节点
由于vue本身是虚拟dom如果通过document来进行节点样式更改的时候有可能会出现'style' is not definde的错误，
这个问题的解决方式就必须得对vue 的理解要求更高一层了，它可以通过在vue本身的周期mounted函数里用ref和$refs 来获取样式，来完成对其样式的更改：示例如下：
<template>
<div>
<div style=“color: green;” ref="abc"><span>我的test</span></div>
</div>
</template>
<script>
export default {
name: 'mytest',
data() {
return {}
},
mounted() {console.log(this.$refs.abc.style.cssText)}
}
<script>
<style>
</style>
说明：
1.ref被用来给元素（子组件）注册引用信息；
2.vm.$refs 一个对象，持有已注册过 ref 的所有子组件（或HTML元素）；
使用：在 HTML元素 中，添加ref属性，然后在JS中通过vm.$refs.属性来获取
上述会将style的内容全部输出（color: green;）
这样的话对其进行更改就可以对相应的属性直接更改（this.$refs.abc.style.color=red）
<template>
<div>
<div :class='{mycss}'><span>我的单个class属性的test</span></div>
<div class='mycolor' :class="{'colordisplay':display}"><span>1.1我的对象更改&&绑定test</span></div>
<div :style='mypagestyle'><span>1.3我的样式内联更改&&绑定test</span></div>
<div :style="[myarr,myarrtest]"><span>1.3我的数组更改&&绑定test</span></div>
<div class='computed' :class='compuretu'>2.计算属性判断</div>
<div style="color: green;" ref="abc"><span>3.我的dom更改test</span></div>
</div>
</template>
<script>
export default {
name: 'mytest',
data() {
return {
serd:true,
slid:true,
mycss: {
color: ''
},
mypagestyle:{
color: 'yellow',
background:"blue"
},
myarr:{
color: 'white'
},
myarrtest:{
background:'#000',
display:'inline'
},
display: true
}
},
mounted() {
console.log(this.$refs.abc.style.cssText)
this.$refs.abc.style.color = 'red' //修改属性
this.$refs.abc.style.background = 'black' //新增属性
this.$refs.abc.style.display = 'inline'
console.log(111)
console.log(this.$refs.abc.style.display)
},
computed: {
compuretu: function() {
return {
compuretu: this.serd && this.slid
}
}
},
methods:{
}
}
</script>
<style>
.mycss {
color: blue
}
.colordisplay {
display: inline;
background: red;
border: 1px solid blue
}
.mycolor {
color: orange
}
.computed {
border: 1px solid yellow
}
.compuretu{
color:white;
background: red;
}
</style>
当然最后这种方式对于初入门的朋友来讲可能会有点理解不透，所以我更建议大家使用前几种方式
总结
以上所述是小编给大家介绍的Vue.js中对css的操作（修改）具体方式详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
这篇文章主要介绍了WebSocket使用以及在vue如何使用问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
这篇文章主要介绍了vue中循环请求接口参数问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要介绍了vue项目打包之后生成一个可修改IP地址的文件(具体操作),本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-03-03
vue关于this.$refs.tabs.refreshs()刷新组件方式
这篇文章主要介绍了vue关于this.$refs.tabs.refreshs()刷新组件方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
vite是新一代的前端构建工具,下面这篇文章主要给大家介绍了关于Vite创建Vue3项目以及Vue3使用jsx的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-08-08
这篇文章主要介绍了Vuex的使用及知识点笔记，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
在现代Web应用中,用户账户管理是一个核心功能,其中密码修改是一个常见的需求,本文将详细介绍如何在Vue.js应用中实现用户密码修改功能,并在成功后跳转到登录页面并刷新该页面,需要的朋友可以参考下2024-12-12
本文主要介绍了vue请求接口并且携带token的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-07-07
收集表单数据可以使用这个v-model实现这个数据的绑定，但是在有些输入框中，还需要一些其他的指令搭配这个v-model指令结合使用，这篇文章主要介绍了vue的表单数据收集，基本指令和自定义指令,需要的朋友可以参考下2023-01-01
图片和文件上传在很多项目中都可以使用的到，本文主要介绍了VUE+element-ui文件上传的示例代码，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
最新评论