Vue教程05(样式处理)
时间:2022-06-25
本文章向大家介绍Vue教程05(样式处理),主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
本文我们来介绍下在Vue中针对样式处理这块的支持
Vue样式处理
一、class
我们首先来看下class属性的使用。
1.基本的class使用
我们先来看下非vue情况的class的使用,如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
<style>
.red {
color: red;
}
.thin {
font-weight: 200;
}
.italic {
font-style: italic;
}
.active {
letter-spacing: 0.5em;
}
</style>
</head>
<body>
<div id="app">
<h1 class="red thin">vue中的样式设置1</h1>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
},
methods:{
}
})
</script>
</body>
</html>
效果
2.绑定数组
效果
3.三目运算
在绑定的数组中我们还可以通过三目运算来实现简单的逻辑,如下
效果如下:
通过效果也可以看出来随着flag的改变,效果也不一样咯~
4.数组中使用对象
上面例子中的三目运算符我们可以替换为对象,效果是一样的。
效果
5.绑定数组
上面都是将数据和view写在一块了,我们也可以将数据直接写在vm中,如下:
效果演示:
通过演示也可以看到,通过绑定对象也是可以的。完整代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
<style>
.red {
color: red;
}
.thin {
font-weight: 200;
}
.italic {
font-style: italic;
}
.active {
letter-spacing: 0.5em;
}
</style>
</head>
<body>
<div id="app">
<!--基本使用-->
<h1 class="red thin">vue中的样式设置1</h1>
<!--通过v-bind 绑定数组 v-bind 可简写为 ':'-->
<h1 v-bind:class="['red','thin']">vue中的样式设置2</h1>
<h1 :class="['red','thin']">vue中的样式设置3</h1>
<!--绑定的数组中添加 三目逻辑-->
<h1 :class="['red','thin',flag?'active':'']">vue中的样式设置4</h1>
<!--绑定的数组使用对象-->
<h1 :class="['red','thin',{'active':flag}]">vue中的样式设置5</h1>
<!--绑定一个vm中的对象-->
<h1 :class="classObj">vue中的样式设置6</h1>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
flag:true,
classObj:{red:true,thin:true,italic:false,active:false}
},
methods:{
}
})
</script>
</body>
</html>
二、style
我们除了可以通过使用class来引用样式外,我们还可以通过style来直接指定样式,Vue也支持此操作,具体如下:
单个style引用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<!-- 对象就是无序键值对的集合 -->
<h1 :style="styleObj1">这是一个h1</h1>
</div>
<script>
// 创建 Vue 实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
styleObj1: { color: 'red', 'font-weight': 200 }
},
methods: {}
});
</script>
</body>
</html>
效果
多个style引用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<!-- 对象就是无序键值对的集合 -->
<h1 :style="styleObj1">这是一个h1</h1>
<h2 :style="[ styleObj1, styleObj2 ]">这是一个h2</h2>
</div>
<script>
// 创建 Vue 实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
styleObj1: { color: 'red', 'font-weight': 200 },
styleObj2: { 'font-style': 'italic' }
},
methods: {}
});
</script>
</body>
</html>
效果:
好了,针对Vue中对样式的使用就介绍到这儿,如果不清楚的欢迎留言探讨~
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- fgsea做GSEA
- 27.opengl高级光照-点光源阴影
- 28.opengl高级光照-法线贴图
- python抓取动态验证码,具体第几帧数的位置静态图片
- 在 Spring Security 中,我就想从子线程获取用户登录信息,怎么办?
- php自动加载
- 011.Nginx防盗链
- 012.Nginx负载均衡
- 013.Nginx动静分离
- 014.Nginx跨域配置
- 深入理解 FilterChainProxy【源码篇】
- matplotlib基础绘图命令之bar
- 使用 Github Actions 自动部署 Angular 应用到 Github Pages
- 路径中关于斜杠/和反斜杠 的区别
- Redis的高级特性与应用场景(二)