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 相关文章推荐
use jscript Create a SQL Server database
Jun 16 Javascript
JavaScript replace(rgExp,fn)正则替换的用法
Mar 04 Javascript
js和jquery使按钮失效为不可用状态的方法
Jan 26 Javascript
jQuery Uploadify 上传插件出现Http Error 302 错误的解决办法
Dec 12 Javascript
js实现内容显示并使用json传输数据
Mar 16 Javascript
原生js实现倒计时--2018
Feb 21 Javascript
Three.js入门之hello world以及如何绘制线
Sep 25 Javascript
详解Node 定时器
Feb 26 Javascript
webpack源码之loader机制详解
Apr 06 Javascript
vue中的面包屑导航组件实例代码
Jul 01 Javascript
layui 选择列表,打勾,点击确定返回数据的例子
Sep 02 Javascript
解决vue单页面应用进入页面加载所有 js 的问题
Aug 12 Javascript
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
JS 网站性能优化笔记
2011/05/24 PHP
win7+apache+php+mysql环境配置操作详解
2013/06/10 PHP
解析php中如何调用用户自定义函数
2013/08/06 PHP
PHP分页显示的方法分析【附PHP通用分页类】
2018/05/10 PHP
PHP isset empty函数相关面试题及解析
2020/12/11 PHP
利用JQuery为搜索栏增加tag提示
2009/06/22 Javascript
JavaScript 事件查询综合
2009/07/13 Javascript
JQuyer $.post 与 $.ajax 访问WCF ajax service 时的问题需要注意的地方
2011/09/20 Javascript
JavaScript的setAttribute兼容性问题解决方法
2013/11/11 Javascript
jquery实现当滑动到一定位置时固定效果
2014/06/17 Javascript
js生成的验证码的实现与技术分析
2014/09/17 Javascript
基于jQuery.Hz2Py.js插件实现的汉字转拼音特效
2015/05/07 Javascript
基于ajax实现文件上传并显示进度条
2015/08/03 Javascript
Bootstrap每天必学之下拉菜单
2015/11/25 Javascript
js实现简单的碰壁反弹效果
2016/08/30 Javascript
微信小程序 Nginx环境配置详细介绍
2017/02/14 Javascript
Angular.js之作用域scope'@','=','&amp;'实例详解
2017/02/28 Javascript
node文件上传功能简易实现代码
2017/06/16 Javascript
微信JS SDK接入的几点注意事项(必看篇)
2017/06/23 Javascript
简单谈谈原生js的math对象
2017/06/27 Javascript
基于D3.js实现时钟效果
2018/07/17 Javascript
Python生成pdf文件的方法
2014/08/04 Python
python使用fileinput模块实现逐行读取文件的方法
2015/04/29 Python
Python函数式编程指南(三):迭代器详解
2015/06/24 Python
python字典键值对的添加和遍历方法
2016/09/11 Python
python实现数独游戏 java简单实现数独游戏
2018/03/30 Python
python3射线法判断点是否在多边形内
2019/06/28 Python
Python3内置模块random随机方法小结
2019/07/13 Python
django-rest-framework解析请求参数过程详解
2019/07/18 Python
高考考python编程是真的吗
2020/07/20 Python
社区优秀志愿者材料
2014/02/02 职场文书
安全生产中长期规划实施方案
2014/02/21 职场文书
2015年教师节感恩寄语
2015/03/23 职场文书
2015小学师德工作总结
2015/07/21 职场文书
董事长致辞
2015/07/29 职场文书
Python实现科学占卜 让视频自动打码
2022/04/09 Python