【Vue】class style：Vue中的两种样式处理方法

class属性

1、基本的class使用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>.red {color: red;}.big {font-weight: 50px;}</style>
</head>
<body><div id="app"><h1 class="red big">vue中的样式处理</h1></div>
</body>
</html>

2、Vue中class的使用

绑定数组

通过 v-bind 绑定数组， v-bind 可简写为 “：”。

<div id="app"><h1 v-bind:class="['red','big']">vue中的样式处理</h1>
</div>
<script>var vm = new Vue({el:"#app",})
</script>

三目运算

在绑定的数组中我们可以通过三目运算来实现简单的逻辑。

<div id="app"><h1 v-bind:class="['red',flag?'big':'']">vue中的样式处理</h1>
</div>
<script>var vm = new Vue({el:"#app",data:{flag:true}})
</script>

数组中使用对象

上面例子中的三目运算符我们可以替换为对象，效果是一样的。

<div id="app"><h1 v-bind:class="['red',{'big':flag}]">vue中的样式处理</h1>
</div>

绑定对象

上面的例子都是将数据和view写在一起了，我们也可以直接将数据以对象的形式写在vm中。

<div id="app"><h1 v-bind:class="obj">vue中的样式处理</h1>
</div>
<script>var vm = new Vue({el:"#app",data:{obj:{red:true, big:true}}})
</script>

style属性

1、单个style引用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body><div id="app"><h1 :style="obj">这是一个h1</h1>  </div><script>var vm = new Vue({el: '#app',data: {obj: { color: 'red', fontSize: '50px' }},});</script></body>
</html>

2、多个style引用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body><div id="app"><h1 :style="obj1">这是一个h1</h1> <h2 :style="[ obj1, obj2 ]">这是一个h2</h2></div><script>var vm = new Vue({el: '#app',data: {obj1: { color: 'red', fontSize: '50px' },obj2: { fontStyle: 'italic' }},});</script>
</body>
</html>

【Vue】class style：Vue中的两种样式处理方法相关推荐

vue项目实现回到顶部的两种超简单方法
vue 中实现回到顶部的两种方式: (1)锚点方式通过点击锚点回到指定位置: <template><div id="topAnchor" ref="f ...
[笔记].浅析在Nios II中的两种寄存器映射方法的异同
此处以我所写的MAX7219为范例,从HDL接口描述到C语言软件编程,分析两种表面不一样.但实质是一样的寄存器映射方法,找出其中联系与区别. 方法1 使用Altera提供的API 1. 使用HDL描述 ...
（曲率系列3：）PCL：PCL库中的两种曲率表示方法pcl::NormalEstimation和PrincipalCurvaturesEstimation
PCL里有两个计算曲率的调用函数: (1)pcl::NormalEstimation 这里边计算的曲率不是数学上定义的曲率. (2)pcl::PrincipalCurvaturesEstimation ...
在线直播源码，VUE 获奖名单滚动显示的两种方式
在线直播源码,VUE 获奖名单滚动显示的两种方式第一种: 使用vue-seamless-scroll组件: 1.安装vue-seamless-scroll npm install vue-seaml ...
Vue系列vue-router的参数传递的两种方式（五）
Vue系列vue-router的参数传递的两种方式前言一.编写Profile页面二.编写App.vue入口三.路由配置,index.js 四.对比route.params方式传参五.项目中 ...
vue 在style标签中引入js变量控制样式
START 如果希望元素的样式根据js代码去控制,常见的办法呢,是在元素的style属性绑定变量即可例如 <h3 :style="{ color: colorList[0] }&qu ...
matlab 遍历每个像素点,Mat中两种像素遍历方法比较
小白,入门中,不足其指正.刚刚接触opencv,从一个Matlab风格的编程环境突然跳转到C++,实在有些不适.单就pixels scanning花了好长时间研究.opencv-tutorials给出 ...
ASP.NET Core MVC中的两种404错误
我们在使用某些系统的时候,如果访问了一个不存在的地址怎么办,比如http://52abp. com/airport/fly:或者访问的地址路由和操作方法虽然存在,但是地址参数id不存在,比如https ...
第2话 Mesh对象的属性和threejs中的两种相机
构建一个"向场景中添加方块"的功能这主要要在dat.GUI中添加按钮以控制场景中各物体对象的属性. <!DOCTYPE html> <html> < ...

【Vue】class style：Vue中的两种样式处理方法

class属性

1、基本的class使用

2、Vue中class的使用

绑定数组

三目运算

数组中使用对象

绑定对象

style属性

1、单个style引用

2、多个style引用

【Vue】class style：Vue中的两种样式处理方法相关推荐

最新文章

热门文章