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
随机推荐
- Linux手动添加swap分区
转自:https://blog.csdn.net/whatday/article/details/51024571 为什么需要swap 根据Redhat公司的建议,Linux系统swap分区最适合的大 ...
- Linux中找到占用cpu最高的线程
在工作中,经常会碰到CPU占用100%的情况,那如何找到是那个线程占用了cpu呢? 1. top命令,找到cpu占用最高的进程 2. 查看该进程的线程, top -p <pid> 3. ...
- mybatis入门--配置
1.导入jar包 mybatis-x.x.x.jar 导入到lib目录下, 如果使用 Maven 来构建项目,则需将下面的 dependency 代码置于 pom.xml 文件中: <depen ...
- php 连接 数据库
$mysql_server_name='localhost'; //改成自己的mysql数据库服务器 $mysql_username='root'; //改成自己的mysql数据库用户名 mysql默 ...
- 初始Redis
一.NoSql数据库(Not Only Sql): 1.又称为非关系型数据库,主流的NoSql数据库有: Redis,Hbase,MongoDB 2.NoSql产生的背景: 1.1.数据库的高并发的读 ...
- 15 个 Android 通用流行框架大全(转载)
1. 缓存 DiskLruCache Java实现基于LRU的磁盘缓存 2.图片加载 Android Universal Image Loader 一个强大的加载,缓存,展示图片的库 Picas ...
- Centos7.1环境下搭建BugFree
环境准备: 系统 配置 IP Centos7.1 1核2G+60GB硬盘 10.10.28.204 1. 安装apache yum install httpd 2. 安装mysql yum inst ...
- 对Java代码加密的两种方式，防止反编译
使用Virbox Protector对Java项目加密有两种方式,一种是对War包加密,一种是对Jar包加密.Virbox Protector支持这两种文件格式加密,可以加密用于解析class文件的j ...
- 131A
#include <stdio.h> #include <string.h> #include <stdbool.h> #define MAXSIZE 105 in ...
- JavaScript基础理解及技巧（入门）
1.java和JavaScript的区别: (1)js只需要解释就可以执行了,而java需要先编译成字节码文.JavaScript的运行只需要浏览器的支持,而java的运行需要JVM(java虚拟机) ...