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等插件实现 ...
随机推荐
- Alpha冲刺 - （7/10）
Part.1 开篇 队名:彳艮彳亍团队组长博客:戳我进入作业博客:班级博客本次作业的链接 Part.2 成员汇报 组员1(组长)柯奇豪 过去两天完成了哪些任务 改用更易用的springboot+myb ...
- 循环队列 & 栈的共用空间
循环队列 非常好的数据结构,充分利用率空间,可以用于网络端存储socket消息! /*************************************** 作者: 未闻花语 版本: v1.0 ...
- boost::bind 实现原理, 手动实现一个
template<typename R, typename T, typename A1> class hangj_call { public: hangj_call(R (T::*f_) ...
- Linux pwn入门教程——格式化字符串漏洞
本文作者:Tangerine@SAINTSEC 原文来自:https://bbs.ichunqiu.com/thread-42943-1-1.html 0×00 printf函数中的漏洞printf函 ...
- Shell-11--for
$(cat /etc/passwd) `cat /etc/passwd`
- linux常用的BootLoader U-boot的前世今生
U-Boot,全称 Universal Boot Loader,是遵循GPL条款的开放源码项目.U-Boot的作用是系统引导. U-Boot从FADSROM.8xxROM.PPCBOOT逐步发展演化而 ...
- Tools - 源代码阅读分析工具Source Insight
简介 https://www.sourceinsight.com/ Source Insight是一个面向项目开发的程序编辑器和代码浏览器,可以分析C/C++.C#.Java.Python等语言源代码 ...
- HttpWebRequst中https的验证处理问题
最近在公司项目中使用了HttpWebRequst相关API,运行环境为.Net/Mono 2.0,是一款针对Unity平台的工具.开发过程中碰到了大家可能都碰到过的问题,Http还是Https? 为什 ...
- Ubuntu16.04 + gtx1060 + cuda8.0 + cudnn5.1 + caffe + Theano + Tensorflow
参考 ubuntu16.04+gtx1060+cuda8.0+caffe安装.测试经历 ,细节处有差异. 首先说明,这是在台式机上的安装测试经历,首先安装的win10,然后安装ubuntu16.04双 ...
- 【xsy2305】喽 计算几何
UPD:这个做法被hack了 题目大意:给你$n$个红点和$m$个黑点,问你至少需要保留多少个黑点,才能用由黑点组成的凸包包住所有红点. 数据范围:$n≤10^5$,$m≤500$ 首先,我们将红点和 ...