08.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">这是一个很大很大的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="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>
08.vue中样式-class的更多相关文章
- vue_music:排行榜rank中top-list.vue中样式的实现:class
排行榜的歌曲列表,根据排名渲染不同的样式,同时需要考虑分辨率的2x 3x图 不同的样式--:class 考虑分辨率的2x 3x图--需要在stylu中的mixin中bgImage根据屏幕分辨率选择图片 ...
- vue 中样式的绑定
1.class的对象绑定 //对应的css <style> .active { color: red; } </style> <!--html 对应的代码--> & ...
- vue学习(八) vue中样式 class 定义引用
//style<style> .red{ color:red; } .thin{//字体粗细 font-weight:200 } .italic{//字体倾斜 font-style:ita ...
- vue中样式的典型操作(:class,:style)
<template> <div class="home-wrapper"> <div class="home-top">th ...
- 09.vue中样式-style
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 【转】vue中样式被覆盖的问题，vue中的style不生效
转载:http://www.cnblogs.com/shangjun6/p/11416054.html 在我们引入外部的样式时,发现自己无论如何都改不了外部的样式,自己的样式老被覆盖,究其原因还是我们 ...
- vue中样式被覆盖的问题
在我们引入外部的样式时,发现自己无论如何都改不了外部的样式,自己的样式老被覆盖,究其原因还是我们的 外部样式放的位置不对 main.js 我们应该在 main.js 的开头引入样式,这样的话就不存在覆 ...
- Vue学习笔记七：Vue中的样式
目录 两种样式 class样式 内联样式 两种样式 Vue中使用样式方式有两种,一种是class样式,一种是内联样式也就是style class样式 class样式使用的方式有5种,HTML如下 &l ...
- vue中动态样式不起作用？ scoped了解一下
vue中style标签使用属性scoped的注意事项 style上添加属性scoped可以实现样式私有化,但是在使用动态样式时,样式会不起作用.可以先去掉scoped
随机推荐
- C++中获取汉字拼音首字缩写/全拼及生僻字的处理
最近一直在修改关于搜索不到生僻字的问题,最后得出结论:对生僻字的处理,办法只有一个,建立一个字库,然后查表找. 可以参考一下:http://download.csdn.net/detail/lshlw ...
- Java远程连接redis, 报错 Connection refused: connect
在今天的学习Redis中报错 Connection refused: connect 我总结了有三种情况: 1.远程服务器中的Redis没有开启. 2.远程连接地址出错,或者是端口出错. 3.远程服务 ...
- vue的属性样式绑定，
<template> <div id="app"> <div v-html="H"></div> //绑定ht ...
- Maven常用的几个命令
mvn clean.mvn package:如果本地仓库中没有需要的jar,第一次执行命令的时候会从仓库下jar包 *) mvn clean :clean项目 *) mvn compile : 编译 ...
- CodeForces 733B Parade
B. Parade time limit per test1 second memory limit per test256 megabytes inputstandard input outputs ...
- Mock Server 入门（一）
Mock Server 使用场景 1.开发过程中依赖一些接口,而这些接口可能有一下情况: 1)接口搭建环境比较困难:例如支付宝的支付接口,需要授权等等准备好才能进行调试 2)接口暂时还未实现时:可以便 ...
- Django + Axios & Ajax post和get 传参
话说千遍淡如水,不如代码来一通. Axios post: let params = new URLSearchParams(); params.append('id',xx) axios({ ur ...
- 洛谷P3516 PRZ-Shift [POI2011] 构造
正解:构造 解题报告: 传送门! umm这题就是很思维的?就是想到了就A了想不到就做不出来,然而我也只能是做到理解不知道怎么想出来,,,感觉构造题什么的就很真诚,一点套路也没有,所以像我这种没有脑子只 ...
- [svc]unix和cpu发展历史
最近搞汇编 , 有一款8086cpu,16bit, 支持内存1M 于是勾起了对计算机历史的兴趣,多了解了下 unix起源历史 [Unix发展历史 - 程序猿-贝岩博客 - CSDN博客]https:/ ...
- django中的数据库迁移
Django是用python写的web开发框架,其特点是: 1.重量级框架,内部封装了很多的功能组件,使开发变的简便快速, 2.MVT模式:前后端分离,高内聚低耦合,m:model,与mvc中的m功能 ...