第二章 Vue快速入门-- 15 vue中通过属性绑定为元素设置class类样式
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Document</title>
<!--1.导入Vue的包-->
<script src=" https://cdn.jsdelivr.net/npm/vue"></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">这是一个很大很大的H1，大到你无法想象！！！</h1> --> <!-- 第一种使用方式，之间传递一个数组，注意：这里的class需要使用 v-bind 做数据绑定 -->
<!-- <h1 :class="['thin','italic']">这是一个很大很大的H1，大到你无法想象！！！</h1> --> <!-- 在数组中使用三元表达式 -->
<!-- <h1 :class="['thin','italic',flag?'active':'']">这是一个很大很大的H1，大到你无法想象！！！</h1> --> <!-- 在数组中使用对象来代替三元表达式，提高代码的可读性 -->
<!-- <h1 :class="['thin','italic',{'active':flag}]">这是一个很大很大的H1，大到你无法想象！！！</h1> --> <!-- 在为class使用v-bind绑定对象的时候，对象的属性是类名，由于对象的属性可带引号，也可不带引号，所以，这里我没写引号；属性的值 是一个标识符 -->
<h1 :class="{red:true,thin:true,italic:false,active:false}">这是一个很大很大的H1，大到你无法想象！！！</h1> <h1 :class="classObj">这是一个很大很大的H1，大到你无法想象！！！</h1> </div>
<script>
//创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el:'#app',
data:{
flag:true,
classObj:{red:true,thin:true,italic:false,active:false}
},
methods:{}
});
</script>
</body>
</html>
第二章 Vue快速入门-- 15 vue中通过属性绑定为元素设置class类样式的更多相关文章
- 黑马vue---16、vue中通过属性绑定为元素设置class类样式
黑马vue---16.vue中通过属性绑定为元素设置class类样式 一.总结 一句话总结: 这里就是为元素绑定class样式,和后面的style样式区别一下 vue中class样式绑定方式的相对于原 ...
- Vue学习之路第十一篇：为页面元素设置class类样式
1.class为页面元素的一个属性,通过前面第五篇的内容可知,操作属性需要使用到v-bind指定(也可简写为 :). 2.先来看一个简单的页面样式内容: <!DOCTYPE html> & ...
- vue 快速入门 系列 —— vue loader 下
其他章节请看: vue 快速入门 系列 vue loader 下 CSS Modules CSS Modules 是一个流行的,用于模块化和组合 CSS 的系统.vue-loader 提供了与 CSS ...
- vue 快速入门 系列 —— vue loader 上
其他章节请看: vue 快速入门 系列 vue loader 上 通过前面"webpack 系列"的学习,我们知道如何用 webpack 实现一个不成熟的脚手架,比如提供开发环境和 ...
- vue 快速入门 系列 —— vue loader 扩展
其他章节请看: vue 快速入门 系列 vue loader 扩展 在vue loader一文中,我们学会了从零搭建一个简单的,用于单文件组件开发的脚手架.本篇将在此基础上继续引入一些常用的库:vue ...
- vue 快速入门 系列 —— Vue 实例的初始化过程
其他章节请看: vue 快速入门 系列 Vue 实例的初始化过程 书接上文,每次调用 new Vue() 都会执行 Vue.prototype._init() 方法.倘若你看过 jQuery 的源码, ...
- vue 快速入门 系列 —— vue 的基础应用（上）
其他章节请看: vue 快速入门 系列 vue 的基础应用(上) Tip: vue 的基础应用分上下两篇,上篇是基础,下篇是应用. 在初步认识 vue一文中,我们已经写了一个 vue 的 hello- ...
- vue 快速入门 系列 —— vue 的基础应用（下）
其他章节请看: vue 快速入门 系列 vue 的基础应用(下) 上篇聚焦于基础知识的介绍:本篇聚焦于基础知识的应用. 递归组件 组件是可以在它们自己的模板中调用自身的.不过它们只能通过 name 选 ...
- vue 快速入门 系列 —— Vue(自身) 项目结构
其他章节请看: vue 快速入门 系列 Vue(自身) 项目结构 前面我们已经陆续研究了 vue 的核心原理:数据侦测.模板和虚拟 DOM,都是偏底层的.本篇将和大家一起来看一下 vue 自身这个项目 ...
随机推荐
- WDM-波分复用
波分复用WDM(Wavelength Division Multiplexing)是将两种或多种不同波长的光载波信号(携带各种信息)在发送端经复用器(亦称合波器,Multiplexer)汇合在一起,并 ...
- MariaDB（第三章）select
基本查询 ``` --查询基本使用(条件,排序,聚合函数,分组,分页) --创建学生表 create table students ( id int unsigned not null auto_in ...
- 如何为根分区扩容（centos7为例）
linux系统所有的文件都是存放在根分区中的,如果根分区容量即将耗尽,我们就需要给根分区扩容,我们可以使用lsblk命令来查看,系统的根分区实际是逻辑卷,所以想要扩展根分区只要将逻辑卷扩容就可以了.此 ...
- 蓝鲸-监控 排错思路 - 原理push - bkdata报错 - saas的日志
1.现象和报错 .[10.253.124.21] paas_agent() paas_agent FATAL Exited too quickly (process log may have deta ...
- MAC使用二进制方式安装Mysql 5.7
一.参考文档: 二.基础环境: 系统:Centos7.4 mysql版本:percona mysql 5.7 三.部署mysql 1.初始化 mysqld --initialize --explici ...
- linux下常见的性能分析工具
转载于:http://bian5399.blog.51cto.com/3848702/834715 性能调优的主要目的是使系统能够有效的利用各种资源,最大的发挥应用程序和系统之间的性能融合,使应用高效 ...
- mvn打包到私服
mvn打包到私服 1 命令行打包 待定... 2 idea打包 1> 配置 pom.xml <!-- 发布 --><distributionManagement> < ...
- 2019牛客暑期多校训练营（第五场）G - subsequeue 1 (一题我真的不会的题)
layout: post title: 2019牛客暑期多校训练营(第五场)G - subsequeue 1 (一题我真的不会的题) author: "luowentaoaa" c ...
- BugkuCTF--never give up
这道题还挺有意思的... http://123.206.87.240:8006/test/hello.php 查看元素,有个1p.html,访问. 还没看到网页元素就跳转了...抓包! 抓到了一堆东西 ...
- Java中创建的对象多了，必然影响内存和性能
1, Java中创建的对象多了,必然影响内存和性能,所以对象的创建越少越好,最后还要记得销毁.