Vue.js中对css的操作(修改)具体方式详解


Posted in Javascript onOctober 30, 2018

使用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的操作(修改)具体方式详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS调试必备的5个debug技巧
Mar 07 Javascript
jQuery获取DOM节点实例分析(2种方式)
Dec 15 Javascript
基于javascript实现图片懒加载
Jan 05 Javascript
JavaScript Date 知识浅析
Jan 29 Javascript
Vue单文件组件的如何使用方式介绍
Jul 28 Javascript
Angular CLI在Angular项目中如何使用scss详解
Apr 10 Javascript
Vue.js更改调试地址端口号的实例
Sep 19 Javascript
详解微信小程序调用支付接口支付
Apr 28 Javascript
JS正则表达式验证端口范围(0-65535)
Jan 06 Javascript
vue fetch中的.then()的正确使用方法
Apr 17 Javascript
JavaScript面向对象核心知识与概念归纳整理
May 09 Javascript
Vue 事件的$event参数=事件的值案例
Jan 29 Vue.js
vue组件中的样式属性scoped实例详解
Oct 30 #Javascript
node上的redis调用优化示例详解
Oct 30 #Javascript
elementUI 设置input的只读或禁用的方法
Oct 30 #Javascript
Vue.js 父子组件通信的十种方式
Oct 30 #Javascript
vue通过style或者class改变样式的实例代码
Oct 30 #Javascript
vue通过cookie获取用户登录信息的思路详解
Oct 30 #Javascript
微信小程序实现左滑修改、删除功能
Oct 19 #Javascript
You might like
Windows和Linux中php代码调试工具Xdebug的安装与配置详解
2014/05/08 PHP
PHP三元运算的2种写法代码实例
2014/05/12 PHP
php的闭包(Closure)匿名函数初探
2016/02/14 PHP
基于laravel制作APP接口(API)
2016/03/15 PHP
PHP 中 DOMDocument保存xml时中文出现乱码问题的解决方案
2016/09/19 PHP
浅析php中array_map和array_walk的使用对比
2016/11/20 PHP
PHP中file_put_contents追加和换行的实现方法
2017/04/01 PHP
PHP读取XML文件的方法实例总结【DOMDocument及simplexml方法】
2019/09/10 PHP
用Javascript评估用户输入密码的强度(Knockout版)
2011/11/30 Javascript
js动态拼接正则表达式的两种方法
2014/03/04 Javascript
jQuery中ajax和post处理json的不同示例对比
2014/11/02 Javascript
ichart.js绘制虚线、平均分虚线效果的实现代码
2016/05/05 Javascript
JavaScript必知必会(三) String .的方法来自何方
2016/06/08 Javascript
a标签调用js的方法总结
2019/09/05 Javascript
vue开发中遇到的问题总结
2020/04/07 Javascript
微信小程序保存图片到相册权限设置
2020/04/09 Javascript
vue组件实现移动端九宫格转盘抽奖
2020/10/16 Javascript
Python中类的继承代码实例
2014/10/28 Python
Python写的Tkinter程序屏幕居中方法
2015/03/10 Python
用Python脚本来删除指定容量以上的文件的教程
2015/05/04 Python
使用PyInstaller将python转成可执行文件exe笔记
2018/05/26 Python
python中使用 xlwt 操作excel的常见方法与问题
2019/01/13 Python
Python3.4学习笔记之 idle 清屏扩展插件用法分析
2019/03/01 Python
pytorch:torch.mm()和torch.matmul()的使用
2019/12/27 Python
python GUI库图形界面开发之PyQt5美化窗体与控件(异形窗体)实例
2020/02/25 Python
HTML5 Canvas 实现圆形进度条并显示数字百分比效果示例
2017/08/18 HTML / CSS
FORZIERI澳大利亚站:全球顶级奢华配饰精品店
2016/12/31 全球购物
英国和国际包裹递送:ParcelCompare
2019/08/26 全球购物
彪马法国官网:PUMA法国
2019/12/15 全球购物
《英英学古诗》教学反思
2014/04/11 职场文书
团日活动总结
2014/04/28 职场文书
2014年乡镇纪委工作总结
2014/12/19 职场文书
新员工辞职信范文
2015/05/12 职场文书
小数乘法教学反思
2016/02/22 职场文书
MySQL通过binlog恢复数据
2021/05/27 MySQL
Spring Security动态权限的实现方法详解
2022/06/16 Java/Android