Vue 系列之 样式相关
Class 与 Style 绑定
动态修改元素样式
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="./vue.js"></script>
<style type="text/css">
.normal {
color: palegreen
}
.error {
color: red
}
</style>
</head>
<body>
<div id="root">
<div class="normal" v-bind:class="{error: changed}" @click="handleClick">{{message}}</div>
</div>
<script>
new Vue({
el: "#root",
data: {
changed: false,
message: "hello world"
},
methods: {
handleClick: function () {
this.changed = !this.changed
}
}
})
</script>
</body>
上述代码定义了两种样式：normal 和 error，通过判断
changed值是否为true来决定是否使用 error 样式
为一个元素绑定多种样式
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="./vue.js"></script>
<style type="text/css">
.normal {
color: palegreen
}
.fs{
font-size: 24px
}
</style>
</head>
<body>
<div id="root">
<div v-bind:class="styles">{{message}}</div>
</div>
<script>
new Vue({
el: "#root",
data: {
changed: false,
message: "hello world",
styles:["normal","fs"]
}
})
</script>
</body>
v-bind:class 支持对多种样式进行增加或异常，可参考动态修改样式来解决这个问题。
应用在组件上
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="./vue.js"></script>
<style type="text/css">
.normal {
color: palegreen
}
.fs {
font-size: 24px
}
</style>
</head>
<body>
<div id="root">
<my-component v-bind:class="styles" :msg="message"></my-component>
</div>
<script>
Vue.component("my-component", {
props: ["msg"],
template: "<p>{{msg}}</p>"
})
new Vue({
el: "#root",
data: {
message: "hello world",
styles: ["normal", "fs"]
}
})
</script>
</body>
绑定内联样式
v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用单引号括起来) 来命名：
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="./vue.js"></script>
<style type="text/css">
.normal {
color: palegreen
}
.error {
color: red
}
.fs {
font-size: 24px
}
</style>
</head>
<body>
<div id="root">
<div v-bind:style="styleObject">{{message}}</div>
</div>
<script>
new Vue({
el: "#root",
data: {
message:'hello world',
styleObject: {
color: 'blue',
fontSize: '13px'
}
}
})
</script>
</body>
v-bind:style 的数组语法支持将多个样式对象应用到同一个元素上：
<div v-bind:style="[baseStyles, overridingStyles]"></div>
当 v-bind:style 使用需要添加浏览器引擎前缀的 CSS 属性时，如 transform，Vue.js 会自动侦测并添加相应的前缀。
从 2.3.0 起你可以为 style 绑定中的属性提供一个包含多个值的数组，常用于提供多个带前缀的值，例如：
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>
Vue 系列之 样式相关的更多相关文章
- AnjularJS系列1 —— 样式相关的指令
最近,开始学习AngularJS. 开始记录学习AngularJS的过程,从一些很简单的知识点开始. 习惯先从实际应用的指令开始,再从应用中去体会AngularJS的优缺点.使用的场景等. 之前一直希 ...
- Vue Cli 中使用 Karma / Chrome 执行样式相关单元测试
在 GearCase 开源项目 中,我使用了 Vue Cli 的默认测试框架.因此和样式相关的东西,都无法进行测试.因为它并不类似于无头浏览器,而是存在于虚拟内存之中. 现状 在如下 button.s ...
- 【AnjularJS系列1 】— 样式相关的指令
最近,开始学习AngularJS. 开始记录学习AngularJS的过程,从一些很简单的知识点开始. 习惯先从实际应用的指令开始,再从应用中去体会AngularJS的优缺点.使用的场景等. 之前一直希 ...
- Vue系列（一）：简介、起步、常用指令、事件和属性、模板、过滤器
一. Vue.js简介 1. Vue.js是什么 Vue.js也称为Vue,读音/vju:/,类似view,错误读音v-u-e 是一个轻量级MVVM(Model-View-ViewModel)框架,和 ...
- Vue系列（三）：组件及数据传递、路由、单文件组件、vue-cli脚手架
上一篇:Vue系列(二):发送Ajax.JSONP请求.Vue生命周期及实例属性和方法.自定义指令与过渡 一. 组件component 1. 什么是组件? 组件(Component)是 Vue.js ...
- Vue系列：在vux的popup组件中使用百度地图遇到显示不全的问题
问题描述: 将百度地图封装成一个独立的组件BMapComponent,具体见 Vue系列:如何将百度地图包装成Vue的组件(http://www.cnblogs.com/strinkbug/p/576 ...
- [js高手之路] vue系列教程 - 事件专题(4)
本文主要讲解事件冒泡,事件绑定的简写,事件默认行为,按键码等一系列与事件相关的知识. 一.事件绑定的简写,@事件类型. 之前我的[js高手之路] vue系列教程 - vue的事件绑定与方法(2) 用 ...
- Vue系列（2）：Vue 安装
前言:关于页面上的知识点,如有侵权,请看 这里 . 关键词:小白.Vue 安装.Vue目录结构.Vue 构建页面流程 ? 初学者安装 vue 用什么好 大家都知道,学 Vue 最好还是去官网学,官网写 ...
- Vue系列（二）：发送Ajax、JSONP请求、Vue生命周期及实例属性和方法、自定义指令与过渡
上一篇:Vue系列(一):简介.起步.常用指令.事件和属性.模板.过滤器 一. 发送AJAX请求 1. 简介 vue本身不支持发送AJAX请求,需要使用vue-resource.axios等插件实现 ...
随机推荐
- （转载）Linux之虚拟机 rehl7的ip
RHEL7最小化安装之后(桥接模式),我们查看本机IP, ip addr 我们要修改配置文件 找到目录 找到文件(每个人的ifcfg-eno16777736都不同),用vi编辑器打开修改配置文件 保存 ...
- springMVC一个Controller处理所有用户请求的并发问题（转）
springMVC一个Controller处理所有用户请求的并发问题 有状态和无状态的对象基本概念: 有状态对象(Stateful Bean),就是有实例变量的对象 ,可以保存数据,是非线程安全的.一 ...
- [算法专题] LinkedList
前段时间在看一本01年出的旧书<effective Tcp/Ip programming>,这个算法专题中断了几天,现在继续写下去. Introduction 对于单向链表(singly ...
- Centos系统安装InfluxDB
概述安装influxDB时需要root用户或者管理员权限. 端口默认情况下,InfluxDB会使用如下的端口: * TCP8086端口是服务器监听端口,对HTTP API响应 * TCP8088端口是 ...
- Visual Stuido快捷键
转自:http://www.cnblogs.com/TankXiao/p/3164995.html 整理了一些VS的快捷键 格式化整个文档:(Ctrl + K, Ctrl + D)智能感知:(Ctrl ...
- 使用CGlib出现java.lang.NoClassDefFoundError: org/objectweb/asm/Type异常
在学习使用CGlib生成动态代理对象,项目的源代码也很简单: package proxy; import java.lang.reflect.Method; import net.sf.cglib.p ...
- DRF 商城项目 - 日志处理
logging 模块 logging 模块是最基本的日志处理模块 缺陷 但是拥有一些很致命的缺陷 要求用户主动查询, 需要登录到服务器才可以查看日志文件 自带的报错外部通知也没办法判断同类取舍, 短 ...
- 2017CS231n学习笔记——计算机视觉的概述
本节课主要讲述了cs231n课程的背景和计算机视觉的历史,也主要介绍了目前很重要的一个计算机视觉数据集--IMAGENET. 更多内容参考我的AI学习之路 课程简介 这门课程是由stanford大学计 ...
- JSLint在idea编译器中报错
jslint:this function needs a 'use strict' pragma报错解决 JSInt是指在编写代码的时候进行代码检查语法,没有必要开启 关闭的方法 在setting中搜 ...
- Bootstrap轮播如何支持移动端左右滑动
一直觉得bootstrap的轮播用起来很好用,代码简单,又支持响应式,不过从来没想过,也不知道原来bootstrap的轮播竟然不支持在手机上左右滑动 解决方法就是:使用滑动手势js插件:hammer. ...