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 相关文章推荐
javascript英文日期(有时间)选择器
May 02 Javascript
基于jquery的让textarea自适应高度的插件
Aug 03 Javascript
很棒的学习jQuery的12个网站推荐
Apr 28 Javascript
通过正则格式化url查询字符串实现代码
Dec 28 Javascript
javascript使用递归算法求两个数字组合功能示例
Jan 03 Javascript
JS中图片压缩的方法小结
Nov 14 Javascript
angular4 共享服务在多个组件中数据通信的示例
Mar 30 Javascript
Vuex 快速入门(简单易懂)
Sep 20 Javascript
Vue中对iframe实现keep alive无刷新的方法
Jul 23 Javascript
JavaScript实现京东放大镜效果
Dec 03 Javascript
JavaScript设计模式之观察者模式与发布订阅模式详解
May 07 Javascript
vue实现可拖拽的dialog弹框
May 13 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
PHP实现搜索时记住状态的方法示例
2018/05/11 PHP
Javascript实现CheckBox的全选与取消全选的代码
2010/07/20 Javascript
多个js与css文件的合并方法详细说明
2012/12/26 Javascript
jquery-syntax动态语法着色示例代码
2014/05/14 Javascript
JS弹出层遮罩,隐藏背景页面滚动条细节优化分析
2016/04/29 Javascript
微信JS-SDK坐标位置如何转换为百度地图坐标
2016/07/04 Javascript
jquery判断对象是否为空并遍历对象的简单实例
2016/07/26 Javascript
jquery 动态合并单元格的实现方法
2016/08/26 Javascript
js实现文字超出部分用省略号代替实例代码
2016/09/01 Javascript
分享一个精简的vue.js 图片lazyload插件实例
2017/03/13 Javascript
理解nodejs的stream和pipe机制的原理和实现
2017/08/12 NodeJs
基于jquery实现五星好评
2017/11/18 jQuery
vue、react等单页面项目应该这样子部署到服务器
2018/01/03 Javascript
node中modules.exports与exports导出的区别
2018/06/08 Javascript
JS实现点击拉拽轮播图pc端移动端适配
2018/09/05 Javascript
详解小程序中h5页面onShow实现及跨页面通信方案
2019/05/30 Javascript
js 闭包深入理解与实例分析
2020/03/19 Javascript
Vue在H5 项目中使用融云进行实时个人单聊通讯
2020/12/14 Vue.js
使用Python微信库itchat获得好友和群组已撤回的消息
2018/06/24 Python
Centos部署django服务nginx+uwsgi的方法
2019/01/02 Python
Python根据指定文件生成XML的方法
2020/06/29 Python
HTML5移动开发图片压缩上传功能
2016/11/09 HTML / CSS
中国最大的团购网站:聚划算
2016/09/21 全球购物
英国DVD和蓝光碟片购买网站:Zoom.co.uk(电影和电视)
2019/09/23 全球购物
Yahoo-PHP面试题1
2016/07/20 面试题
华为慧通笔试题
2016/04/22 面试题
传播学专业毕业生自荐信
2013/11/04 职场文书
高中考试作弊检讨书
2014/01/14 职场文书
党员教师自我剖析材料
2014/09/29 职场文书
起诉离婚协议书样本
2014/11/25 职场文书
导游词之无锡华莱坞
2019/12/02 职场文书
python办公自动化之excel的操作
2021/05/23 Python
青岛市的收音机研制与生产
2022/04/07 无线电
Java 数组的使用
2022/05/11 Java/Android
Python测试框架pytest核心库pluggy详解
2022/08/05 Golang
使用JS前端技术实现静态图片局部流动效果
2022/08/05 Javascript