vue.js 怎么改变 CSS 样式? 下面本篇文章给大家介绍一下 vue.JS 中对 CSS 的操作 (修改) 的方法. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
Vue.JS 中对 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>/
说明:
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>
更多 web 前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/vue-js/17345.html