NO.04--我的使用心得之使用vue绑定class名
今天聊一聊这个话题,其实方式有很多种,我今天介绍几种我使用到的,各位看官耐心看;
一、用 变量形式 绑定单个 Class 名
在 vue
中绑定单个 class
名还好说,直接写就可以了
<template>
<div id="app">
<!-- 因为是自定义属性,所以要用到 v-bind ,简写为 : -->
<!-- 3.将 box 绑定给 div -->
<div :class="box"></div>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
// 2.在 data 中把 yellow 赋给 box
box: 'yellow'
}
}
}
</script>
<style>
/* 1.在样式表中写好样式 */
.yellow{
width: 200px;
height: 200px;
background: #ff0;
}
</style>
二、用 数组形式 绑定多个 Class 名
比如我们想再给这个 div
加个阴影
在 style
中写好样式
.shadow{
box-shadow: 10px 10px 5px 0 #999;
}
在 data
中继续添加数据对象
<script>
export default {
name: 'app',
data () {
return {
box: 'yellow',
shadow:'shadow'
}
}
}
</script>
在标签中以数组的形式绑定 Class
名
<template>
<div id="app">
<div :class="[box,shadow]"></div>
</div>
</template>
就 OK 了。
三、用 json 形式 绑定多个 Class 名
该方法方便用于当同时添加多个 Class 名时,在某种情况下判断显示哪种样式
先写好样式
<style>
.yellow{
width: 200px;
height: 200px;
background: #ff0;
}
.shadow{
box-shadow: 10px 10px 5px 0 #999;
}
</style>
在 data
中添加数字对象,用来做判断
<script>
export default {
name: 'app',
data () {
return {
show1:true,
show2:false
}
}
}
</script>
以 json
的形式绑定到 class
中,通过布尔值改变 show1
与 show2
的值,来控制 div
的状态
<template>
<div id="app">
<div :class="{yellow:show1,shadow:show2}"></div>
</div>
</template>
NO.04--我的使用心得之使用vue绑定class名的更多相关文章
- [asp.net mvc 奇淫巧技] 04 - 你真的会用Action的模型绑定吗?
在QQ群或者一些程序的交流平台,经常会有人问:我怎么传一个数组在Action中接收.我传的数组为什么Action的model中接收不到.或者我在ajax的data中设置了一些数组,为什么后台还是接收不 ...
- [2019.04.01]Linux 学习心得(2)-- tar 命令的理解
这篇文章并不是发布最早的但是阅读量却每天都见长,很想知道各位大大是怎么找到这篇文章的.如果不忙,还请各位大大评论一下我看看,没准我可以为大家改进一下本文,提升一下质量. =============== ...
- 树莓派Ubuntu 16.04 MATA系统 修改用户文件夹名后,提示configure it with blueman-service
自从修改了树莓派的Ubuntu 16.04 MATA 系统的 /home/ 下的用户文件夹名后,使用vncserver远程操作,看到桌面每次都提示 Configured directory for i ...
- 树莓派3b+ Ubuntu 16.04 MATA系统 ssh远程登陆后修改主机名、用户密码和用户名
写在前面: 刚刚开始写博客,记录下自己的学习过程,备忘. 最近在使用树莓派做智能小车的开发,使用的是树莓派3b+,安装的是Ubuntu 16.04 MATA 系统,安装系统后需要修改主机名,登陆密码以 ...
- 使用Git进行代码管理的心得--github for windows
首先简述一下Git进行代码管理的情况 我使用的是github for windows,官网下载的速度太慢,所以用了离线安装包.安装之后会有GitHub和GitShell两个软件,其中Github采用图 ...
- Debian 16.04 配置双网卡绑定bond
Debian 16.04 配置双网卡绑定bond Debian 16.04 bonding多网卡配置 安装负载均衡软件 fenslave root@ubuntu:~# apt-get install ...
- windows10安装ubuntu双系统教程(初稿)
windows10安装ubuntu双系统教程(绝对史上最详细) Win10 Ubuntu16.04/Ubuntu18.04双系统完美安装 Windows10+Ubuntu18.04双系统安装成功心得( ...
- 启动模式:uefi, legacy,以及GRUB命令使用
机器启动模式:uefi, legacy 设置入口:BIOS:boot mode 磁盘分区表格式: gpt uefi所使用(此种模式下,grub只能识别gpt格式的boot引导项) mbr legacy ...
- 使用C#开发数据库应用系统
第一章 初识Windows程序 01.浅谈控制台应用 解析:控制台应用程序:dos窗口中显示 Windows窗体应用程序:有控件参与的,支持事件的一种程序 02.关于窗体项目的注意点: /*01.一个 ...
随机推荐
- vlc源码分析(二) 播放流程
当点击播放文件或者输入要播放的文件后,vlc会执行一系列的流程. 首先需要了解视频以及流媒体处理及播放的流程,由链接中的描述,视频以及流媒体处理时,首先要解协议(http,rtmp,rtsp等),然后 ...
- cocos2d-x开发:服务端基础库封装
元旦前面几天都在忙着面试,随后的几天也就一直在做服务端基础库开发方面的工作.对于服务端开发,是很久之前的事情了.那时候我还在大学读书,一直都是在倒腾服务端开发方面的东西,毕业后参加公司工作就是一直从事 ...
- Gradle Goodness: Excluding Tasks for Execution
In Gradle we can create dependencies between tasks. But we can also exclude certain tasks from those ...
- 微信小程序实现转义换行符
在html中可以直接使用<br />换行,但是小程序wxml中使用<br />无效,可以换成\n Page({ data: { title: '至少5个字\n请多说些感受吧' ...
- HTML5 -- 浏览器数据缓存 -- indexedDB
IndexedDB是一种可以让你在用户的浏览器内持久化存储数据的方法,为web应用提供了丰富的查询功能,使我们的应用在在线和离线都能正常工作. 由于 IndexedDB 本身的规范还在持续演进中,当前 ...
- Vue2 轮播图组件 slide组件
Vue2原生始轮播图组件,支持宽度自适应.高度设置.轮播时间设置.左右箭头按钮控制,圆点按钮切换,以及箭头.圆点按钮是否显示. <v-carousel :slideData="slid ...
- 与“零值”作比较的 if 语句。
笔试时候遇到的问题,在此做一下记录. 1.if语句中的布尔变量与零值作比较 不能用布尔变量与true,false,1,0直接作比较.布尔变量类型的语义是:零值为“假”,任何非零值都表示“真”.因为tr ...
- JAVA乐观锁实现-CAS
是什么 全称compare and swap,一个CPU原子指令,在硬件层面实现的机制,体现了乐观锁的思想. JVM用C语言封装了汇编调用.Java的基础库中有很多类就是基于JNI调用C接口实现了多线 ...
- ubuntu18.04 没声音解决方案(坑自己版)
那啥,半个月没开电脑了,这几天打开发现系统没声了 那咋办呢,修一修呗 搜索了下问题,还挺简单的 jiang@ryzen:~$ sudo apt install pavucontrol 打开 jiang ...
- 实现一个 RESTful API 服务器
RESTful 是目前最为流行的一种互联网软件结构.因为它结构清晰.符合标准.易于理解.扩展方便,所以正得到越来越多网站的采用. 什么是 REST REST(REpresentational Stat ...