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等插件实现 ...
随机推荐
- Django Template 进阶
回顾: Variables {{ var }} {{ dict.key }} {{ var.attr }} {{ var.method }} {{ varindex }} Filter {{ list ...
- 解决C#中调用WCF方法报错：远程服务器返回错误 (404) 未找到
IIS配置问题,解决方法: 1. 首先添加MIME类型 扩展名“.svc”,MIME类型 “application/octet-stream” 2.处理程序映射--添加托管处理程序 请求路径 “.sv ...
- Java学习笔记40（缓冲流）
缓冲流: 在读写文件的各种流中,最令人烦恼的就是效率问题, 而缓冲流的目的就是提高读写效率 字节输出缓冲流: package demo; import java.io.BufferedOutputSt ...
- Dispatch Queue 之 dispatch_async
 可以看到,在queue里的任务,不仅仅是一个函数,也可以是一个其他的queue. 下面是一个例子.  全局队列的处理 一般一个全局队列有多个线程,这些个线程会遍历并处理链表里的任务. 对于全局队 ...
- 从github clone文件： Failed to receive SOCKS4 connect request ack.
安装了代理,能上网,也能从github上下载文件,就是无法从github上clone文件, 查了很久资料后,终于发现使用sudo可以解决问题.不过,不知道原因是什么? 比如:git clone htt ...
- Java 基础学习总结（一）抽象类和接口
接触java的时间不是很长,以前对抽象类和接口的定义和区别也是模糊不清,最近拿起学校的教程读了起来,也参阅了网上的博客大神理解和总结,于是决定自己按照自己的理解来总结一下. 抽象类(半成品) 一般 ...
- 【深入 MongoDB 开发】使用正确的姿势连接分片集群
MongoDB分片集群(Sharded Cluster)通过将数据分散存储到多个分片(Shard)上,来实现高可扩展性.实现分片集群时,MongoDB 引入 Config Server 来存储集群的元 ...
- python中selenium操作下拉滚动条方法汇总
UI自动化中经常会遇到元素识别不到,找不到的问题,原因有很多,比如不在iframe里,xpath或id写错了等等:但有一种是在当前显示的页面元素不可见,拖动下拉条后元素就出来了. 比如下面这样一个网页 ...
- SSH, 整合分页功能，连带DAO经典封装
任何一个封装讲究的是,使用,多状态.Action: 任何一个Action继承分页有关参数类PageManage,自然考虑的到分页效果,我们必须定义下几个分页的参数.并根据这个参数进行查值. 然 ...
- 从零开始学 Web 之 CSS3（七）多列布局，伸缩布局
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...