玩转Vue.js中的CSS操作
总结下面的内容,最简单的方式是给需要操作的dom元素添加ref="refName"属性,
然后通过this.$refs.refName.style.要修改的样式=修改的值 即可完成修改css
使用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>
说明:
- ref被用来给元素(子组件)注册引用信息;
- 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>
推荐阅读
-
Python 教程:Python 中的集合及其对集合的所有操作
-
前端开发中的 CSS 命名规则和 BEM 实践
-
通过 Vue 中的 v-bind 增强样式控制--(通过 v-bind 操作类和操作样式属性的详细说明,附示例和代码)
-
SQL 中的 DDL 分类 - I. 操作数据库的 DDL 语句
-
玩转JS函数式编程_013] 4.1 JavaScript纯函数相关概念(中4.1 JavaScript 纯函数相关概念(中):函数副作用的几种具体表现
-
力扣 1884.Egg Drop Two Egg(两个鸡蛋掉落) - 输入: n = 100 输出: 1414 解说 最佳策略是 - 从 9 楼扔下第一个鸡蛋。如果蛋碎了,那么 f 在 0 和 8 之间。从第 1 层扔第 2 个鸡蛋,然后每扔 1 层,分 8 次找到 f。总操作次数 = 1 + 8 = 9。 - 如果第一个鸡蛋没有破,那么从 22 楼扔第一个鸡蛋。如果蛋碎了,那么 f 介于 9 和 21 之间。将第二个鸡蛋从 10 楼往下扔,然后每扔一次往上扔一层楼,在 12 次尝试中找出 f。总操作次数 = 2 + 12 = 14。 - 如果第一个鸡蛋没有再次破碎,那么用类似的方法从 34、45、55、64、72、79、85、90、94、97、99 和 100 层扔第一个鸡蛋。 无论结果如何,最多需要扔 14 次才能确定 f。 一个非常有趣的问题 方法 1:动态编程
-
代码随机化算法训练营 | 235. 二进制搜索树的最近共同祖先, 701. 二进制搜索树中的插入操作, 450. 二进制搜索树中删除节点
-
水槽实践 - 水槽中拦截器的解释和操作
-
Java 8新特性探究(十三)JavaFX 8新特性以及开发2048游戏-JavaFX历史## 跟java在服务器端和web端成绩相比,桌面一直是java的软肋,于是Sun公司在2008年推出JavaFX,弥补桌面软件的缺陷,请看下图JavaFX一路走过来的改进 从上图看出,一开始推出时候,开发者需使用一种名为JavaFX Script的静态的、声明式的编程语言来开发JavaFX应用程序。因为JavaFX Script将会被编译为Java bytecode,程序员可以使用Java代码代替。 JavaFX 2.0之后的版本摒弃了JavaFX Script语言,而作为一个Java API来使用。因此使用JavaFX平台实现的应用程序将直接通过标准Java代码来实现。 JavaFX 2.0 包含非常丰富的 UI 控件、图形和多媒体特性用于简化可视化应用的开发,WebView可直接在应用中嵌入网页;另外 2.0 版本允许使用 FXML 进行 UI 定义,这是一个脚本化基于 XML 的标识语言。 从JDK 7u6开始,JavaFx就与JDK捆绑在一起了,JavaFX团队称,下一个版本将是8.0,目前所有的工作都已经围绕8.0库进行。这是因为JavaFX将捆绑在Java 8中,因此该团队决定跳过几个版本号,迎头赶上Java 8。 ##JavaFx8的新特性 ## ###全新现代主题:Modena 新的Modena主题来替换原来的Caspian主题。不过在Application的start方法中,可以通过setUserAgentStylesheet(STYLESHEET_CASPIAN)来继续使用Caspian主题。 参考http://fxexperience.com/2013/03/modena-theme-update/ ###JavaFX 3D 在JavaFX8中提供了3D图像处理API,包括Shape3D (Box, Cylinder, MeshView, Sphere子类),SubScene, Material, PickResult, LightBase (AmbientLight 和PointLight子类),SceneAntialiasing等。Camera类也得到了更新。从JavaDoc中可以找到更多信息。 ###富文本 强化了富文本的支持 ###TreeTableView ###日期控件DatePicker 增加日期控件 ###用于 CSS 结构的公共 API
-
深入解析Linux中的挂载操作