vue里的样式添加之类名改动 和style改动
类名下有不同样式,通过增加或者减少类名,来增加或减少样式。
v-bind:class = {类名:变量,类名:变量。。。} 变量为布尔值,如果是true则类名添加,反正类名不添加到该元素身上
v-bind:class =“ [‘类名1’,‘类名2’,。。。]”(字符串代表数据类名)
v-bind: class=“[变量名,变量名2]”
v-bind:class = [类名1,类名2,{类名3:变量}。。。]
style的数据绑定和class一致,
:style=‘变量名’;
:style= '[变量名1, 变量名2]'
.div {
height: 100px;
width: 100px;
background: yellow
}
.circle {
border-radius: 50%
}
</style>
<script src="vue.js"></script>
</head> <body>
<div id="app">
<div class="div" v-bind:class={circle:isCircle}></div>
<button v-on:click='isCircle=!isCircle'>click</button>
</div> <script>
var vm = new Vue({
el: '#app',
data: {
isCircle: true
} })
vue里的样式添加之类名改动 和style改动的更多相关文章
- vue里的样式添加之行间样式
一:行间样式 :和绑定其他dom的属性一样, v-bind:style= <div v-bind:style={backgroundColor:color}>2</ ...
- 怎样在 Vue 里面绑定样式属性 ?
在 Vue 里绑定样式属性可以使用 v-bind:class="" 和 v-bind:style="" , 二者都可以接受 变量 / 数组 / 对象. 不同点是 ...
- vue通过控制boolean值来决定是否添加class类名
vue通过控制boolean值来决定是否添加class类名
- 3-5 Vue中的样式绑定
Vue中的样式绑定: 本案例,简单设计一个<div>的点击绑定事件来改变div的样式效果 方法一:[class] ①(class和对象的绑定) //如上,运用class和一个对象的形式来解 ...
- [转]vue数据绑定(数据,样式,事件)
1.mounted 与 methods 与 computed 与 watched区别 From:https://blog.csdn.net/qinlulucsdn/article/details/80 ...
- VUE中CSS样式穿透
VUE中CSS样式穿透 1. 问题由来 在做两款H5的APP项目,前期采用微信官方推荐的weui组件库.后来因呈现的效果不理想,组件不丰富,最终项目完成后全部升级采用了有赞开发的vant组件库.同时将 ...
- vue.js(7)--vue中的样式绑定
vue中class样式与内联样式的绑定 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...
- 在Vue项目中,添加的背景图片在服务器上不显示,如何处理
遇到的问题: 在vue项目开发过程中,我们常常会在页面中添加背景图片.可是当我们在样式中添加了背景图片,编译打包部署到服务器上时,发现图片并不能显示出来,这是为什么呢~~~ 我们一般写的css样式如下 ...
- 深入理解 vue 中 scoped 样式作用域的规则
哈喽!大家好!我是木瓜太香,今天我们来聊一个 vue 的样式作用域的问题,通常我们开发项目的时候是要在 style 上加上 scoped 来起到规定组件作用域的效果的,所以了解他们的规则也是很有必要的 ...
随机推荐
- vim8.0模式详解
pattern pattern.txt For Vim version 8.0. 最近更新: 2017年8月 VIM 参考手册 by Bram Moolenaar 译者: lang2 http://v ...
- mysql批量修改列名为小写
-- bo_project_info 为表名 SELECT concat( 'alter table ', 'bo_project_info', ' change column ', COLUMN_ ...
- UART简介及与COM口的区别
原帖地址:https://blog.csdn.net/jirryzhang/article/details/70084743 https://www.cnblogs.com/smartjourneys ...
- Go语言无锁队列组件的实现 (chan/interface/select)
1. 背景 go代码中要实现异步很简单,go funcName(). 但是进程需要控制协程数量在合理范围内,对应大批量任务可以使用"协程池 + 无锁队列"实现. 2. golang ...
- pip安装pycrypto报错:Microsoft Visual C++ 14.0 is required. 和 SSLError: HTTPSConnectionPool的解决办法
今天本打算把[Python3爬虫]网易云音乐爬虫 的代码敲一遍, 但是在安装pycrypto老是报错, 由于我计算是win10, 并且也有vs2017 python3环境下安装pycrypto的一些问 ...
- Linux系统复制文件/文件夹到远程服务器
从一个服务器复制文件到另一个服务器,或者从本地到远程复制是 Linux 管理员的日常任务之一. 我觉得不会有人不同意,因为无论在哪里这都是你的日常操作之一.有很多办法都能处理这个任务,我们试着加以概括 ...
- 未能加载文件或程序集“SuperMap.Data.dll”
重新配置的新的开发环境,使用的是原来的工程文件,编译通过,运行报错:"未能加载文件或程序集"SuperMap.Data.dll"或它的某一个依赖项.找不到指定的模块&qu ...
- Pilosa文档翻译(三)示例
目录 简单说明 Introduction 数据模型 Data Model 映射Mapping 0列(colums) --> 1字段(field) 1列(colums) --> 1字段(fi ...
- 【转】VS2015详细安装步骤
亲身经历记录下来,以备后用.也希望能够帮助到有需要的朋友们! 1.安装之前首先下载VS2015,下载地址: [VS2015社区版官方中文版下载]:http://download.microsoft.c ...
- golang 类型转换
import ( "bytes" "encoding/binary" "encoding/gob" "fmt" ) fu ...