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等插件实现 ...
随机推荐
- Word中的段落
Word文档中的块级内容的最基本单位是段落,段落用<p>元素进行存储.段落定义在新行中开始,段落可以包含三方面的信息:可选的段落属性.内嵌的内容(通常为文本)和用于比较两个文档的内容的一组 ...
- 如果你要查看文件的每个部分是谁修改的, 那么 git blame 就是不二选择
原文: http://gitbook.liuhui998.com/5_5.html 如果你要查看文件的每个部分是谁修改的, 那么 git blame 就是不二选择. 只要运行'git blame [f ...
- Android开发工程师文集-Activity生命周期，启动方式，Intent相关介绍，Activity详细讲解
前言 大家好,给大家带来Android开发工程师文集-Activity生命周期,启动方式,Intent相关介绍,Activity详细讲解的概述,希望你们喜欢 Activity是什么 作为一个Activ ...
- WCF透明代理类，动态调用，支持async/await
我们希望WCF客户端调用采用透明代理方式,不用添加服务引用,也不用Invoke的方式,通过ChannelFactory<>动态产生通道,实现服务接口进行调用,并且支持async/await ...
- 修改hosts文件用来观看coursera视频
52.84.246.90 d3c33hcgiwev3.cloudfront.net 52.84.246.252 d3c33hcgiwev3.cloudfront.net 52.84.246.144 d ...
- Telerik for AJAX RadGrid控件
作为一名.net小白,今天分享一下telerik知识的学习.熟悉ASP.NET Web Form的都知道Grid View或者是List View等表格控件,所以今天和大家分享一下telerik Ra ...
- OC学习5——类和对象
1.OC是在C语言基础上进行扩展得到的一门面向对象的程序设计语言,它也提供了定义类.成员变量和方法的基本功能.类可以被认为是一种自定义的数据类型,使用它可以定义变量,所有使用类定义的变量都是指针类型的 ...
- vue-cli3 DllPlugin 提取公用库
vue 开发过程中,保存一次就会编译一次,如果能够减少编译的时间,哪怕是一丁点,也能节省不少时间.开发过程中个人编写的源文件才会频繁变动,而一些库文件我们一般是不会去改动的.如果能把这些库文件提取出来 ...
- h5端呼起摄像头扫描二维码并解析
2016年6月29日补充: 最近做了一些与表单相关的项目,使用了h5的input控件,在使用过程中遇到了很多的坑.也包括与这篇文章相关的. 首先我们应该知道使用h5新提供的属性getUserMedia ...
- TCP/IP 笔记 - ICMPv4和ICMPv6 : Internet控制报文协议
ICMP是一种面向无连接的协议,负责传递可能需要注意的差错和控制报文,差错指示通信网络是否存在错误(如目的主机无法到达.IP路由器无法正常传输数据包等.注意,路由器缓冲区溢出导致的丢包不包括在ICMP ...