ref改变样式 vue_vue.js对样式的具体操作详解
使用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)}”
export default {
name: 'mytest',
data() {
return {
display: true
}
},
mounted() {},
computed: {},
methods:{}
}
.colordisplay {
display: inline;
background: red;
border: 1px solid blue
}
如果display为true,那么此时该部分的class就是 class="mycolor colordisplay",通过设置display的值就可以控制colordisplay的显示
如果要设置绑定多个class的话就和正常的对象键值对一样中间用逗号隔开就可以了v-bind:class="{'colordisplay':display,'ispay':pay}"
1.2:内联样式:
v-bind:style='mycolor'
template
data
mypagestyle:{color: 'yellow',background:"blue"},
1.3:数组语法:
也可以通过数组来绑定v-bind:style='[mycolor1,mycolor2]'
然后设置返回的数据为
myarr:{color: 'white'},
myarrtest:{background:'#000',display:'inline'},
2.计算属性
也可以通过计算属性计算(适用于较为复杂判断)样式
将计算属性的返回值作为类名,通过判断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 来获取样式,来完成对其样式的更改:示例如下:
export default {
name: 'mytest',
data() {
return {}
},
mounted() {console.log(this.$refs.abc.style.cssText)}
}
说明:
1.ref被用来给元素(子组件)注册引用信息;
2.vm.$refs 一个对象,持有已注册过 ref 的所有子组件(或HTML元素);
使用:在 HTML元素 中,添加ref属性,然后在JS中通过vm.$refs.属性来获取
上述会将style的内容全部输出(color: green;)
这样的话对其进行更改就可以对相应的属性直接更改(this.$refs.abc.style.color=red)
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:{
}
}
.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;
}
当然最后这种方式对于初入门的朋友来讲可能会有点理解不透,所以我更建议大家使用前几种方式
种方式。
欢迎大家评论指正
ref改变样式 vue_vue.js对样式的具体操作详解相关推荐
- python输入参数改变图形_Python基于Tensor FLow的图像处理操作详解
本文实例讲述了Python基于Tensor FLow的图像处理操作.分享给大家供大家参考,具体如下: 在对图像进行深度学习时,有时可能图片的数量不足,或者希望网络进行更多的学习,这时可以对现有的图片数 ...
- JS ES6中export和import详解
1.Export 模块是独立的文件,该文件内部的所有的变量外部都无法获取.如果希望获取某个变量,必须通过export输出, // profile.js export var firstName = ' ...
- js系列教程1-数组操作全解
全栈工程师开发手册 (作者:栾鹏) 快捷链接: js系列教程1-数组操作全解 js系列教程2-对象和属性全解 js系列教程3-字符串和正则全解 js系列教程4-函数与参数全解 js系列教程5-容器和算 ...
- JS弹出窗口Window.Open详解
JS弹出窗口Window.Open详解 一.window.open()支持环境: JavaScript1.0+/JScript1.0+/Nav2+/IE3+/Opera3+ 二.基本语法: windo ...
- js中toString()和String()区别详解
转载自 js中toString()和String()区别详解 我们知道String()与 .toString()都是可以转换为字符串类型,但是String()与 .toString()的还是有区别的 ...
- java调用js匿名函数参数,js匿名函数作为函数参数详解
由衷的感叹,js真是烦. 学到现在,渐渐理解了什么是:语言都是通用的,没有好不好,只有擅长不擅长. 继承,多态,甚至指针,c能实现,c++,java有,javascript(和java是雷锋和雷峰塔的 ...
- Linux用户、权限及改变文件所有者及文件所属组多例详解 附python代码
https://blog.csdn.net/hanhanwanghaha宝藏女孩 欢迎您的关注! 欢迎关注微信公众号:宝藏女孩的成长日记 如有转载,请注明出处(如不注明,盗者必究) Linux用户.权 ...
- vue在created调用点击方法_vue.js中created方法的使用详解
这次给大家带来vue.js中created方法的使用详解,使用vue.js中created方法的注意事项有哪些,下面就是实战案例,一起来看一下. 这是它的一个生命周期钩子函数,就是一个vue实例被生成 ...
- JS逆向之浏览器补环境详解
JS逆向之浏览器补环境详解 "补浏览器环境"是JS逆向者升职加薪的必备技能,也是工作中不可避免的操作. 为了让大家彻底搞懂 "补浏览器环境"的缘由及原理,本文将 ...
最新文章
- linux shell脚本 判断,Shell脚本中的逻辑判断
- layui table 列覆盖
- 从前序与中序遍历序列构造二叉树—leetcode105
- Haproxy+多台MySQL从服务器(Slave) 实现负载均衡
- canvas笔记-画一个五角星(含算法)
- 【C++ STL学习之三】容器deque深入学习
- 程序员降薪求职到底该不该?
- DotNET:LINQ对泛型(Generic)操作和泛型方法及属性
- C++ Iostreams 用法详解(二)标准输入输出
- malloc 是如何分配内存的?
- 手把手教python发送邮件
- Chrome浏览器出现无法访问此网站/无法显示此网页的错误,怎么解决?
- TPM分析笔记(十)TPM 组织架构(TPM hierarchy)
- 594. 最长和谐子序列--Python
- UE4 Geometry Polygon
- springboot+JRebel--插件实现热部署
- python gui 框架中显示gif_使用tkinter显示动态gif
- 华为防火墙虚拟系统的案例分析(个人总结向)
- (六)	更新glibc版本
- 恶搞,vbs+bat实现随机位置无限弹窗