vue中绑定style样式的方式

vue中绑定样式的方式有多种下面就来看看吧
开始之前先准备一些样式
css样式

  <style>.red {color: red}.green {color: green}.big {font-size: 48px}.big_blue {background-color: blue;}</style>

1.直接绑定：calss='activeClass’

<body><!-- 绑定class的方式1.直接绑定   ：calss='activeClass'--><div id="app"><!-- 直接绑定 --><p :class="activeClass" class="big">hanpy new Year</p> </div><script>var vm = new Vue({el: "#app",data:{}})</script>

2.对象语法
:class="{‘属性名’：‘属性值’}" 属性名就是生效的类名值为布尔值，true生效，false不生效
直接绑定一个对象 :class=“aa” aa 是data中的一个属性： aa:{“blue”:true,“big”:false}
也可以通过计算属性返回一个对象。
推荐的用法：如果绑定的类名比较少，可以直接绑定对象，如果比较多，建议将对象写在data中，如果涉及到逻辑运算，可以用计算属性返回一个对象。

<div id="app"><!-- 对象语法 --><p :class="{green:isGreen,big:isBig}">hanpy new Year</p> <p :class="aa">hanpy new Year</p> <p :class="bb">hanpy new Year</p> </div><script>var vm = new Vue({el: "#app",data: {isGreen:true,isBig:true,age: 20,aa: {"red": true,"big": false},myColor_blue: "bc_blue",myColor_red: "red",myColor_green: "green",mySize: "big"},methods: {},computed: {bb() {return {"green": this.age > 18,"big": true}}}})</script>

3.数组语法 :class=’[]'

 <div id="app"><!-- 数组语法 --><!-- <p :class="[age>18?myColor_red:myColor_green,mySize]">hanpy new Year</p> --></div><script>var vm = new Vue({el: "#app",data: {myColor_blue: "bc_blue",myColor_red: "red",myColor_green: "green",mySize: "big"},methods: {},computed: {bb() {return {"green": this.age > 18,"big": true}}}})</script>

4.数组+对象

<div id="app"><p :class="[aa,myColor_blue]">happy new Year</p></div><script>var vm = new Vue({el: "#app",data: {age: 20,aa: {"red": true,"big": false},myColor_blue: "bc_blue",myColor_red: "red",myColor_green: "green",mySize: "big"},methods: {},computed: {bb() {return {"green": this.age > 18,"big": true}}}})</script>

通过vue来控制样式 style
1.对象语法： :style={样式名:‘样式值’} 样式名如果有-，则改成驼峰式命名。
:style=“obj” 样式值可以是data中的一个变量。
代码

<div id="app"><p :style="{color:'red',backgroundColor:'skyblue'}">happy new year</p><p :style="{color:activeColor, backgroundColor: 'skyblue'}">happy new year</p></div><script>//创建Vue实例,得到 ViewModelvar vm = new Vue({el: '#app',data: {activeColor:"green",aa: {color: 'red', backgroundColor: 'skyblue'},bb:{fontSize:"30px"}},computed:{myStyle(){return {color: 'green', backgroundColor: 'skyblue'}}}});</script>

2.计算属性返回一个样式对象。

 <div id="app"><p :style="myStyle">happy new year</p></div><script>//创建Vue实例,得到 ViewModelvar vm = new Vue({el: '#app',data: {},computed:{myStyle(){return {color: 'green', backgroundColor: 'skyblue'}}}});</script>

3.数组语法可以将多个样式对象写在同一个数组中。

 <div id="app"><p :style="[aa,bb]">happy new year</p></div><script>//创建Vue实例,得到 ViewModelvar vm = new Vue({el: '#app',data: {activeColor:"green",aa: {color: 'red', backgroundColor: 'skyblue'},bb:{fontSize:"30px"}},computed:{}});</script>

vue中绑定style样式的方式相关推荐

Vue中动态绑定style样式写法
1. 动态绑定style样式注意点通过短横杠(-)连接的属性名都要转为驼峰形式,例:font-size要变成fontSize: 如果直接写样式属性的值,需要用引号引起来,例:fontSize: '1 ...
Vue.js框架学习—绑定style样式
一.对象写法模板和Vue实例 <body><div id="root"><div :style="styleObj">{{ ...
Vue中组件间通信的方式
Vue中组件间通信的方式 Vue中组件间通信包括父子组件.兄弟组件.跨级组件.非嵌套组件之间通信. props $emit props $emit适用于父子组件的通信,这种组件通信的方式是我们运用的非 ...
vue中，scss样式的三种写法——当前页面直接定义、@import引入样式、main.js引入公共样式 deep和important的写法
vue中,scss样式的三种写法--当前页面直接定义.@import引入样式.main.js引入公共样式 & deep和important的写法 1.安装scss # 安装node-sass ...
Vue中的style标签的lang=“ “和scpoed属性
Vue中的style 的lang=" "和scpoed属性普通的 style 标签只支持普通的样式,如果想要启用 scss 或 less ,需要为 style 元素,设置 lan ...
[react] react中除了在构造函数中绑定this,还有别的方式吗？
[react] react中除了在构造函数中绑定this,还有别的方式吗? 1:函数定义的时候使用箭头函数 2:函数调用是使用bind绑定this 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放 ...
vue 文件转换二进制_在vue中使用axios实现post方式获取二进制流下载文件(实例代码)...
需求点击导出下载表格对应的excel文件在 vue 项目中,使用的 axios ,后台 java 提供的 post 接口 api 实现第一步,在 axios 请求中加入参数,表示接收的数据为二进 ...
23.Vue绑定style样式
目录 1.style样式对象写法 2.style样式数组写法 3.总结 22.Vue绑定class样式_爱米酱的博客-CSDN博客为了讲好class样式,我们这里提前准备了7个样式作为例子来讲解. b ...
vue中:class实现样式的绑定
在vue中通过 :class 实现实现标签中条件与样式的绑定示例代码: <div class="right" :class="{ kuan: 条件1, bi ...

vue中绑定style样式的方式

vue中绑定style样式的方式相关推荐

最新文章

热门文章