第七节:Class与Style绑定
1、绑定class,v-bind:class 简写为::class
对象方式:
<!-- 绑定一个class对象,也可以绑定data中的对象--> <span v-bind:class="{orange:isorange, green:isgreen}">abc</span> <span v-bind:class="colors">def</span>
data: { isorange: true, isgreen: false, colors: { 'orange': false, 'green': true } }
数组方式:
<span v-bind:class="[orangecolor, big]">abc</span> <span v-bind:class="[big,colors]">def</span>
data: { big: "big", orangecolor: "orange", colors: { 'orange': false, 'green': true } }
2、绑定style , v-bind:style 简写为: :style
对象方式:
<span v-bind:style="{color:yellowcolor,fontSize:larger}">def</span>
<span v-bind:style="fontsizes">def</span>
data: { larger: "30px", yellowcolor: "yellow",
fontsizes: {
'fontSize': '40px'
}
}
数组方式:
<span v-bind:style="[fontsizes,colorstyle]">sss</span>
data: { fontsizes: { 'fontSize': '40px' }, colorstyle: { 'color': 'orange' } }
3、注意在data中写style样式的时候,CSS 属性名可以用驼峰式(camelCase)或短横分隔命名(kebab-case)。
整体的例子如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="vue.js"></script> <style> .orange { color: orange } .green { color: green } .big { font-size: larger; } </style> </head> <body> <div id="app"> <!-- 绑定一个class对象,也可以绑定data中的对象--> <span v-bind:class="{orange:isorange, green:isgreen}">abc</span> <span v-bind:class="colors">def</span> <span v-bind:class="[orangecolor, big]">abc</span> <span v-bind:class="[big,colors]">def</span> <!-- 绑定一个style对象,也可以绑定data中的对象--> <span v-bind:style="{color:yellowcolor,fontSize:larger}">def</span> <span v-bind:style="fontsizes">def</span> <!--数组语法--> <span v-bind:style="[fontsizes,colorstyle]">sss</span> </div> </body> <script type="text/javascript"> var app1 = new Vue({ el: "#app", data: { isorange: true, isgreen: false, big: "big", larger: "30px", orangecolor: "orange", yellowcolor: "yellow", colors: { 'orange': false, 'green': true }, fontsizes: { 'fontSize': '40px' }, colorstyle: { 'color': 'orange' } }, methods: { } }); </script> </html>
第七节:Class与Style绑定的更多相关文章
- 第7节class与style绑定
方法一 效果图: 方法二 效果图: 方法三 效果图: 代码: <!DOCTYPE html> <html lang="en" xmlns:v-bind=&qu ...
- centos Linux下磁盘管理 parted,df ,du,fdisk,partprobe,mkfs.ext4,mount,/etc/fstab,fsck,e2fsck,mk2efs,tmpfs ,nr_inodes, LVM,传统方式扩容文件系统 第七节课
centos Linux下磁盘管理 parted,df ,du,fdisk,partprobe,mkfs.ext4,mount,/etc/fstab,fsck,e2fsck,mk2efs,tmpf ...
- 关于vue.js中class与style绑定的学习
练习代码: html: <!DOCTYPE html><html lang="en"><head> <meta charset=" ...
- Vue#Class 与 Style 绑定
绑定HTMLCLASS 在我没看这之前,我觉得要写绑定class ,应该像绑定数据一样这么写 class ={{class-a}} 看官方教程时,不推荐这么写,推荐这样 v-bind:class=&q ...
- Vue中class与style绑定
gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson07 一 用对象的方法绑定class 很简单,举个栗子: <!D ...
- 基于Extjs的web表单设计器 第七节——取数公式设计之取数公式的使用
基于Extjs的web表单设计器 基于Extjs的web表单设计器 第一节 基于Extjs的web表单设计器 第二节——表单控件设计 基于Extjs的web表单设计器 第三节——控件拖放 基于Extj ...
- Vue.2.0.5-Class 与 Style 绑定
Class 与 Style 绑定 数据绑定一个常见需求是操作元素的 class 列表和它的内联样式.因为它们都是属性 ,我们可以用v-bind 处理它们:只需要计算出表达式最终的字符串.不过,字符串拼 ...
- Knockout.Js官网学习(style绑定、attr绑定)
Style绑定 style绑定是添加或删除一个或多个DOM元素上的style值.比如当数字变成负数时高亮显示,或者根据数字显示对应宽度的Bar.(注:如果你不是应用style值而是应用CSS clas ...
- JAVA 从GC日志分析堆内存 第七节
JAVA 从GC日志分析堆内存 第七节 在上一章中,我们只设置了整个堆的内存大小.但是我们知道,堆又分为了新生代,年老代.他们之间的内存怎么分配呢?新生代又分为Eden和Survivor,他们的比 ...
- Style绑定
目的 style绑定可以添加或者移除DOM元素的样式值.这非常有用,例如,当值为负数时将颜色变为红色. (注:如果要修改CSS整个类,请使用css绑定) <div data-bind=" ...
随机推荐
- memset 究竟在做什么?
我要 一字节一字节 地 memory set
- 「2014-4-13」Think twice before starting the adventure
杂文一篇. 1. 取名字真心是一件特别困难的事情.这位独立开发者花了将近两天的时间,给他的私人项目取了个名字:这篇博客<为何我不鸟你的开源项目>里显然还忽视了一个原因,就是名字取得太烂以至 ...
- [UCSD白板题] Majority Element
Problem Introduction An element of a sequence of length \(n\) is called a majority element if it app ...
- 『TCP/IP详解——卷一:协议』读书笔记——18
2013-08-27 15:44:52 第7章 Ping程序 7.1 引言 “ping”这个名字来源于声纳定为操作.Ping程序由Mike Muuss编写,目的是为了测试另一台主机是否可达.该程序发送 ...
- middleware - bodyparser
express4之前,bodyparser是express下的一个对象. express4把bodyparser分离出来. 本文中的实例基于以下的这个请求 $.ajax({ url: '/save', ...
- Python开源框架
info:更多Django信息url:https://www.oschina.net/p/djangodetail: Django 是 Python 编程语言驱动的一个开源模型-视图-控制器(MVC) ...
- [XAF] How to use the Allow/Deny permissions policy in the existing project
https://www.devexpress.com/Support/Center/Question/Details/T418166 Clear [C#] using DevExpress.Persi ...
- 【整理】--【字符设备】分配设备号register_chrdev_region()、alloc_chrdev_region() 和 register_chrdev()
(1) 分配设备编号,注册设备与注销设备的函数均在fs.h中声明,如下: extern int register_chrdev_region(dev_t,unsigned int,const char ...
- Linux内核--网络栈实现分析(二)--数据包的传递过程(上)
本文分析基于Linux Kernel 1.2.13 原创作品,转载请标明http://blog.csdn.net/yming0221/article/details/7492423 更多请看专栏,地址 ...
- PCFG -- 基于统计方法生成语法树
语法树的作用 一棵语法树不仅包括了词性(part of speech), 还包括了短语(如名词短语, 动词短语)和结构化的信息(如主语, 谓语和宾语). 这些信息是进行机器翻译所必须的, 例如机器翻译 ...