第二章 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 自身这个项目 ...
随机推荐
- Hadoop_Hbase集群完全离线安装[CDH 5.13.1]
here 一.环境准备:(这儿准备了三台虚拟机:内存6-3-3) JDK: -openjdk rpm -e java--openjdk-headless rpm -e java--openjdk-he ...
- js高程之作用域
我们知道js执行环境有全局环境(window)和局部环境(一般指函数环境)之分. ; function calc(){ ; } 上述代码,虽然有两个num变量,但是他们所在的执行环境却是不同的,第一个 ...
- SQLServer 断开数据库连接
数据库名:test1 1. 查询数据库当前连接 select * from master.sys.sysprocesses where dbid = db_id('test1') 2. 断开指定连接 ...
- input.validity
HTML5为表单提供了自带的输入规则提示 但是实际开发中,我们往往需要自定义提示消息和规则,例如限定了最大值但不要求超出时提示错误信息,这时便用到了H5提供的表单新的JS属性--validity,它是 ...
- 汉诺塔问题的C++实现
有三根杆子A,B,C.A杆上有N个(N>1)穿孔圆环,盘的尺寸由下到上依次变小.要求按下列规则将所有圆盘移至C杆:每次只能移动一个圆盘:大盘不能叠在小盘上面.如何移?最少要移动多少次? 原理可参 ...
- Interceptors - 拦截器
1.概述 Flume有能力在运行阶段修改/删除Event,这是通过拦截器(Interceptors)来实现的. 拦截器需要实现org.apache.flume.interceptor.Intercep ...
- python 爬虫 urllib模块 反爬虫机制UA
方法: 使用urlencode函数 urllib.request.urlopen() import urllib.request import urllib.parse url = 'https:// ...
- Array of Doubled Pairs
Given an array of integers A with even length, return true if and only if it is possible to reorder ...
- sql sever 两数据表差异比较EXCEPT、INTERSECT
1.概念: EXCEPT主要是用来获取两个结果集的差:两个结果用EXCEPT链接,返回第一个结果集不在第二个结果集中的数据. INTERSECT主要是用来获取两个结果集的交集:两个结果用INTERSE ...
- Spring（十三）-- Spring 事务
Spring 事务 1. 回忆之前事务知识点 一:事务的概念 将一系列的数据操作捆绑在一起,成为一个整体进行统一管理! 一条或者多条sql语句的集合! 二:事务的ACID特性 原子性(Atomic ...