Vue学习之路第十一篇:为页面元素设置class类样式
1、class为页面元素的一个属性,通过前面第五篇的内容可知,操作属性需要使用到v-bind指定(也可简写为 :)。
2、先来看一个简单的页面样式内容:
<!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>vue样式</title>
<script type="text/javascript" src="js/vue.min.js"></script> <style type="text/css">
.red{
color: red;
}
.thin{
font-weight: bold;
}
.size{
font-size: 30px;
}
</style>
</head>
<body>
<div id="app">
<p class="red size">这是Vue样式示例</p>
</div> <script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{},
methods:{}
})
</script>
</body>
</html>
里面简单的定义了三个样式类:red、thin、size;接下来我们通过v-bind实现同样的效果。
<p v-bind:class="redStr">这是Vue样式示例</p>
p标签里我们添加v-bind指令,class里的样式内容为Vue对象里data属性定义的“redStr”值。
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
redStr:'red size'
},
methods:{}
})
</script>
data里redStr的值为“red size”,所以运行效果是一样的。
3、看下个例子:
<body>
<div id="app">
<p v-bind:class="['red',flag?'size':'']">这是Vue样式示例</p>
</div> <script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
flag:true
},
methods:{}
})
</script>
</body>
这里我感觉虽然用了v-bind指令,但是其没有从data里取数据,其直接把样式定义成了一个固定字符串数组,通过数组内容取对应的样式。其有一个特点就是可以读取三元表达式,根据三元表达式来控制样式是否进行展示。而且我们还可以对这个三元表达式进行简化,用对象的方式来达到同样的效果。代码如下:
<p v-bind:class="['red',{'size':flag}]">这是Vue样式示例</p>
4、下个例子:
<body>
<div id="app">
<p v-bind:class="classObj">这是Vue样式示例</p>
</div> <script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
classObj:{'size':true,'red':true,'thin':true}
},
methods:{}
})
</script>
</body>
这里通过属性绑定了data对象数据classObj,其值为一个对象,通过true或者false来决定是否应用该样式,这样的代码比较简洁而且灵活度比较高。
5、以上几种方式都可以用来定义class样式,具体使用哪一种可以根据具体需求场景来应用。
每天进步一点点!
Vue学习之路第十一篇:为页面元素设置class类样式的更多相关文章
- 黑马vue---16、vue中通过属性绑定为元素设置class类样式
黑马vue---16.vue中通过属性绑定为元素设置class类样式 一.总结 一句话总结: 这里就是为元素绑定class样式,和后面的style样式区别一下 vue中class样式绑定方式的相对于原 ...
- Vue学习之路第三篇:插值表达式和v-text的区别
上一篇说到插值表达式有一个问题: 页面频繁刷新或者网速加载很慢的时候,页面会先出现“{{ msg }}”,再一闪而过出现真实的数据. 对于这个问题Vue给予了解决办法,看具体事例. <div i ...
- Vue学习之路第七篇:跑马灯项目实现
前面六篇讲解了Vue的一些基础知识,正所谓:学以致用,今天我们将用前六篇的基础知识,来实现类似跑马灯的项目. 学前准备: 需要掌握定时器的两个函数:setInterval和clearInterval以 ...
- vue学习指南:第十一篇(详细) - Vue的 路由 第一篇 ( router )
一.路由的配置 路由 vue-router 1. 什么是路由? 路由相当于一个配置对象 路由:就是我们通过不同的url访问不同的内容,通过angular.js 可以实现多视图的单页,现在流行的单页面 ...
- Vue学习之路第二十篇:Vue生命周期函数-组件创建期间的4个钩子函数
1.每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时在这个过程中也会运行一些叫做生命周期钩子的函数 ...
- Vue学习之路第十二篇:为页面元素设置内联样式
1.有了上一篇的基础,接下来理解内联样式的设置会更简单一点,先看正常的css内联样式: <dvi id="app"> <p style="font-si ...
- Vue学习之路第十篇:简单计算器的实现
前面九篇讲解了vue的一些基础知识,正所谓:学以致用,今天我们将用前九篇的基础知识,来模拟实现计算器的简单功能,项目价值不高,纯粹是为了加深掌握所学知识. 学前准备: 需要掌握JavaScript的e ...
- Vue学习之路第八篇:事件修饰符
学习准备: ①.顾名思义,“事件修饰符”那么肯定是用来修饰事件,既然和事件有关系,那么肯定和“v-on”指令(也可简写为:@)有关系了. ②.事件修饰符有以下几类: .stop:阻止冒泡 .preve ...
- Vue学习之路第五篇:v-bind
v-bind:是Vue提供的用于绑定html属性的指令. html中常见的属性有:id.class.src.title.style等,他们都是以 名称/值对 的形式出现,如:id="firs ...
随机推荐
- 使用Neo4j和简单分词算法实现菜品推荐系统
背景:本推荐系统基于一款硬件产品--旺小宝桌牌.客人按下点餐按钮,扫码进入点餐界面,然后开始点自己喜欢的菜,在手机端下单.目前在成都已有近200家合作餐饮商家. 菜品推荐功能: 当客人在某商家使用桌牌 ...
- i=i+1,i+=1与i++的区别
1. i=i+1 a.读取右i的地址 b,i=1 c.读取左i的地址 d. 值赋给左i 2.i+=1 a.读取左i的地址 b.i+1 c.值给i 3.i++ a.读取右i的地址 b.值加1
- 洛谷—— P2014 选课
https://www.luogu.org/problem/show?pid=2014 题目描述 在大学里每个学生,为了达到一定的学分,必须从很多课程里选择一些课程来学习,在课程里有些课程必须在某些课 ...
- HDU 5355 Cake
HDU 5355 Cake 更新后的代码: 今天又一次做这道题的时候想了非常多种思路 最后最终想出了自觉得完美的思路,结果却超时 真的是感觉自己没救了 最后加了记忆化搜索,AC了 好了先说下思路吧.不 ...
- luogu3111 [USACO14DEC]牛慢跑Cow Jog_Sliver
题目大意 有N (1 <= N <= 100,000)头奶牛在一个单人的超长跑道上慢跑,每头牛的起点位置都不同.由于是单人跑道,所有他们之间不能相互超越.当一头速度快的奶牛追上另外一头奶牛 ...
- Makefile中用宏定义进行条件编译(gcc -D)/在Makefile中进行宏定义-D【转】
本文转载自:http://blog.csdn.net/maopig/article/details/7230311 在源代码里面如果这样是定义的:#ifdef MACRONAME//可选代码#en ...
- C++ 指针 引用 变量引用
变量引用: 引用的作用就是给变量起个别名,假如有一个变量a,想给它起个别名b, 可以这么写:int a;//定义a是整型变量.int &b=a;//声明b是a的引用. 上面就是 ...
- java中 抽象类和抽象方法
在面向对象中,所有的对象都是由类来描绘的,但是并不是所有的类都用来描绘对象的,当一个类并不能包含完整的信息来描绘一个具体的对象时,我们把这个类称为抽象类.抽象类除了不完整的描述一个对象之外,其他的功能 ...
- springmvc-servlet.xml 第二种选择
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...
- 3.ThinkPHP入门---视图
视图:MVC三大组成部分,负责信息的展示和输出 1.视图的创建 创建的位置需要是在分组目录下的view目录下余控制器同名的目录中. 2.视图的展示 在smarty和tinkphp都是使用diaplay ...