类名下有不同样式，通过增加或者减少类名，来增加或减少样式。

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改动的更多相关文章

  1. vue里的样式添加之行间样式

    一:行间样式 :和绑定其他dom的属性一样, v-bind:style=          <div v-bind:style={backgroundColor:color}>2</ ...

  2. 怎样在 Vue 里面绑定样式属性 ?

    在 Vue 里绑定样式属性可以使用 v-bind:class="" 和 v-bind:style="" , 二者都可以接受 变量 / 数组 / 对象. 不同点是 ...

  3. vue通过控制boolean值来决定是否添加class类名

    vue通过控制boolean值来决定是否添加class类名

  4. 3-5 Vue中的样式绑定

    Vue中的样式绑定: 本案例,简单设计一个<div>的点击绑定事件来改变div的样式效果 方法一:[class] ①(class和对象的绑定) //如上,运用class和一个对象的形式来解 ...

  5. [转]vue数据绑定(数据,样式,事件)

    1.mounted 与 methods 与 computed 与 watched区别 From:https://blog.csdn.net/qinlulucsdn/article/details/80 ...

  6. VUE中CSS样式穿透

    VUE中CSS样式穿透 1. 问题由来 在做两款H5的APP项目,前期采用微信官方推荐的weui组件库.后来因呈现的效果不理想,组件不丰富,最终项目完成后全部升级采用了有赞开发的vant组件库.同时将 ...

  7. vue.js（7）--vue中的样式绑定

    vue中class样式与内联样式的绑定 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  8. 在Vue项目中，添加的背景图片在服务器上不显示，如何处理

    遇到的问题: 在vue项目开发过程中,我们常常会在页面中添加背景图片.可是当我们在样式中添加了背景图片,编译打包部署到服务器上时,发现图片并不能显示出来,这是为什么呢~~~ 我们一般写的css样式如下 ...

  9. 深入理解 vue 中 scoped 样式作用域的规则

    哈喽!大家好!我是木瓜太香,今天我们来聊一个 vue 的样式作用域的问题,通常我们开发项目的时候是要在 style 上加上 scoped 来起到规定组件作用域的效果的,所以了解他们的规则也是很有必要的 ...

随机推荐

  1. 解析 ViewTreeObserver 源码（上）

    主要内容:ViewTreeObserver 是被用来注册监听视图树的观察者,在视图树发生全局改变时将收到通知.本文从 ViewTreeObserver 源码出发,带你剖析 ViewTreeObserv ...

  2. centos7.2重新安装yum

    [root@zf-test-web01-4 ~]# yum install rng-toolsLoaded plugins: fastestmirrorLoading mirror speeds fr ...

  3. [oracle] Oracle存储过程里操作BLOB的字节数据的办法，例如写入32位整数

    作者: zyl910 一.缘由 BLOB是指二进制大对象,也就是英文Binary Large Object的缩写. 在很多时候,我们是通过其他编程语言(如Java)访问BLOB的字节数据,进行字节级的 ...

  4. NOIP2011普及组 数字反转

    题目OJ链接: http://codevs.cn/problem/1130/ https://www.luogu.org/problemnew/show/P1307 2011年NOIP全国联赛普及组 ...

  5. Linux 下的 sleep

    最近在阅读 libev 的源码,看到 libev 的代码里面的 sleep 实现, 我觉得可以把这个 sleep 实现单独拿出来,作为参考,以后可以直接拿来用. 代码如下(稍有修改): void ev ...

  6. 单片机成长之路（avr基础篇）- 003 AVR单片机的BOOT区

    BOOT区的由来基于一个简单的道理,即单片机的程序是保存在FLASH中的,要运行程序就必须不停的访问FLASH存储器.对于一般的FLASH存储器,数据的写入需要一定的时间来完成,在数据写入完成之前,存 ...

  7. 转 Java虚拟机5：Java垃圾回收（GC）机制详解

    转 Java虚拟机5:Java垃圾回收(GC)机制详解 Java虚拟机5:Java垃圾回收(GC)机制详解 哪些内存需要回收? 哪些内存需要回收是垃圾回收机制第一个要考虑的问题,所谓“要回收的垃圾”无 ...

  8. MySQL查询库和表占用的硬盘空间大小

    在mysql中有一个默认的数据表information_schema,information_schema这张数据表保存了MySQL服务器所有数据库的信息.如数据库名,数据库的表,表栏的数据类型与访问 ...

  9. Linux下通过 rm -f 删除大量文件时报错：Argument list too long

    Linux下通过 rm -f 删除大量的小文件时出现类似如下错误信息:  -bash: /bin/rm: Argument list too long 如下图所示: 问题原因 如果待删除文件中包含的小 ...

  10. win下查找端口占用进程并定位到具体程序

    很多时候,我们会在服务器上运行多个java程序,但是在任务管理器里看到的都是一样的图标,想要找到我们想要的那个进程咋办呢? 列出所有端口进程 C:\Users\desp>netstat -ano ...