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写一个弹出层并锁屏效果实现代码
Dec 07 Javascript
jquery触发a标签跳转事件示例代码
Jul 21 Javascript
一个JavaScript递归实现反转数组字符串的实例
Oct 14 Javascript
JQuery实现展开关闭层的方法
Feb 17 Javascript
javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果代码
Aug 04 Javascript
在Javascript操作JSON对象,增加 删除 修改的简单实现
Jun 02 Javascript
Javascript中indexOf()和lastIndexOf应用方法实例
Aug 24 Javascript
AugularJS从入门到实践(必看篇)
Jul 10 Javascript
jQueryUI Sortable 应用Demo(分享)
Sep 07 jQuery
解决ie img标签内存泄漏的问题
Oct 13 Javascript
JS加密插件CryptoJS实现AES加密操作示例
Aug 16 Javascript
Vue和React有哪些区别
Sep 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
WordPress中获取页面链接和标题的相关PHP函数用法解析
2015/12/17 PHP
PHP中加速、缓存扩展的区别和作用详解(eAccelerator、memcached、xcache、APC )
2016/07/09 PHP
laravel学习教程之关联模型
2016/07/30 PHP
laravel 多图上传及图片的存储例子
2019/10/14 PHP
实现局部遮罩与关闭原理及代码
2013/02/04 Javascript
javascript实现网页字符定位的方法
2015/07/14 Javascript
关于json字符串与实体之间的严格验证代码
2016/11/10 Javascript
jQuery网页定位导航特效实现方法
2016/12/19 Javascript
JQuery获取鼠标进入和离开容器的方向
2016/12/29 Javascript
jQuery中ajax获取数据赋值给页面的实例
2017/12/31 jQuery
vue实现微信分享朋友圈,发送朋友的示例讲解
2018/02/10 Javascript
世界上最短的数字判断js代码
2019/09/09 Javascript
vue prop传值类型检验方式
2020/07/30 Javascript
JS typeof fn === 'function' &amp;&amp; fn()详解
2020/08/22 Javascript
NodeJS配置CORS实现过程详解
2020/12/02 NodeJs
[03:40]2014DOTA2国际邀请赛 B神专访:躲箭真的很难
2014/07/13 DOTA
Python Mysql数据库操作 Perl操作Mysql数据库
2009/01/12 Python
Python while 循环使用的简单实例
2016/06/08 Python
Python自定义进程池实例分析【生产者、消费者模型问题】
2016/09/19 Python
Python多进程方式抓取基金网站内容的方法分析
2019/06/03 Python
Python基于pandas绘制散点图矩阵代码实例
2020/06/04 Python
Python如何使用27行代码绘制星星图
2020/07/20 Python
Canvas制作旋转的太极的示例
2018/03/09 HTML / CSS
香港草莓网土耳其网站:Strawberrynet TR
2017/03/02 全球购物
美国宠物用品网站:Value Pet Supplies
2018/03/17 全球购物
Otiumberg官网:英国半精致珠宝品牌
2021/01/16 全球购物
机械工程师求职自我评价
2013/09/23 职场文书
年终考核评语
2014/01/19 职场文书
30年同学聚会邀请函
2014/01/25 职场文书
党校学习心得体会范文
2014/09/09 职场文书
运动会加油稿50字
2015/07/21 职场文书
小学班主任培训心得体会
2016/01/07 职场文书
你对自己的信用报告有过了解吗?
2019/07/09 职场文书
2019年作为一名实习生的述职报告
2019/09/29 职场文书
python实现A*寻路算法
2021/06/13 Python
Python中的嵌套循环详情
2022/03/23 Python