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 相关文章推荐
使用jscript实现二进制读写脚本代码
Jun 09 Javascript
JavaScript中判断页面关闭、页面刷新的实现代码
Aug 27 Javascript
EasyUi datagrid 实现表格分页
Feb 10 Javascript
Javascript显示和隐藏ul列表的方法
Jul 15 Javascript
js轮播图的插件化封装详解
Jul 17 Javascript
es6系列教程_ Map详解以及常用api介绍
Sep 25 Javascript
聊聊JS动画库 Velocity.js的使用
Mar 13 Javascript
JS验证输入的是否是数字及保留几位小数问题
May 09 Javascript
layui中使用jquery控制radio选中事件的示例代码
Aug 15 jQuery
js隐式转换的知识实例讲解
Sep 28 Javascript
node.js实现微信开发之获取用户授权
Mar 18 Javascript
了解javascript中的Dom操作
May 27 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
php代码收集表单内容并写入文件的代码
2012/01/29 PHP
常见的四种POST 提交数据方式(小总结)
2015/10/08 PHP
thinkphp实现163、QQ邮箱收发邮件的方法
2015/12/18 PHP
详解Yii2 rules 的验证规则
2016/12/02 PHP
cakephp常见知识点汇总
2017/02/24 PHP
PHP实现的基于单向链表解决约瑟夫环问题示例
2017/09/30 PHP
PHP 模拟登陆功能实例详解
2019/09/10 PHP
javascript中的prototype属性实例分析说明
2010/08/09 Javascript
利用JQuery动画制作滑动菜单项效果实现步骤及代码
2013/02/07 Javascript
jQuery 遍历-nextUntil()方法以及prevUntil()方法的使用介绍
2013/04/26 Javascript
JavaScript定义类和对象的方法
2014/11/26 Javascript
Javascript页面跳转常见实现方式汇总
2015/11/28 Javascript
jquery在ie7下选择器的问题导致append失效的解决方法
2016/01/10 Javascript
NodeJS和BootStrap分页效果的实现代码
2016/11/07 NodeJs
Vue项目中如何引入icon图标
2018/03/28 Javascript
vue中,在本地缓存中读写数据的方法
2018/09/21 Javascript
浅析Python中MySQLdb的事务处理功能
2016/09/21 Python
Python基于回溯法子集树模板解决m着色问题示例
2017/09/07 Python
Python3使用turtle绘制超立方体图形示例
2018/06/19 Python
python3实现指定目录下文件sha256及文件大小统计
2019/02/25 Python
pyinstaller打包单个exe后无法执行错误的解决方法
2019/06/21 Python
python进行二次方程式计算的实例讲解
2020/12/06 Python
Python之Sklearn使用入门教程
2021/02/19 Python
泰国国际航空公司官网:Thai Airways International
2019/12/04 全球购物
劳资员岗位职责
2013/11/11 职场文书
《与象共舞》教学反思
2014/02/24 职场文书
个人委托书如何写
2014/09/25 职场文书
2014年档案管理员工作总结
2014/12/01 职场文书
2014年便民服务中心工作总结
2014/12/20 职场文书
敬业奉献模范事迹材料
2014/12/24 职场文书
2016大一新生军训感言
2015/12/08 职场文书
2016年10月份红领巾广播稿
2015/12/21 职场文书
《迟到》教学反思
2016/02/24 职场文书
十大好看的穿越动漫排名:《瑞克和莫蒂》第一,国漫《有药》在榜
2022/03/18 日漫
Mysql 如何合理地统计一个数据库里的所有表的数据量
2022/04/18 MySQL
浅谈Redis缓冲区机制
2022/06/05 Redis