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

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. web安全测试---AppScan扫描工具

    安全测试应该是测试中非常重要的一部分,但他常常最容易被忽视掉. 尽管国内经常出现各种安全事件,但没有真正的引起人们的注意.不管是开发还是测试都不太关注产品的安全.当然,这也不能怪我们苦B的“民工兄 弟 ...

  2. RobotFrameWork环境搭建（基于HTTP协议的接口自动化）

    1. 前言 接着上一篇<RobotFramework框架系统课程介绍>,本篇主要介绍一下在基于RobotFramework框架开展接口自动化前,前期的环境如何搭建,正所谓”工欲善其事,必先 ...

  3. 内核中的锁机制--RCU

    一. 引言 众所周知,为了保护共享数据,需要一些同步机制,如自旋锁(spinlock),读写锁(rwlock),它们使用起来非常简单,而且是一种很有效的同步机制,在UNIX系统和Linux系统中得到了 ...

  4. MySQL技术内幕读书笔记（二）——InnoDB存储引擎

    目录 InnoDB存储引擎 InnoDB存储架构 Checkpoint技术 Master Thread 工作方式 InnoDB关键特性(放一下,感觉看后面,再看总结吧) InnoDB存储引擎 Inno ...

  5. Java基础（二）面向对象（上）

    面向对象基础知识 面向对象是相对面向过程而言的 面向对象和面向过程都是一种思想 面向过程强调的是功能行为 面向对象将功能封装进对象,强调具备了功能的对象 面向对象是基于面向过程的 面向对象的特征: 封 ...

  6. jQuery(三) javascript跨域问题(JSONP解决)

    加油~ --WH 一.什么是javascript跨域问题? 域:服务器域名,唯一标识(协议,域名,端口)必须保证一致,说明域相同 跨域:在一个服务器上,去访问另一个服务器上,并且得到另一个服务器返回回 ...

  7. 小白都能看明白的VLAN原理解释

    为什么需要VLAN 1. 什么是VLAN? VLAN(Virtual LAN),翻译成中文是“虚拟局域网”.LAN可以是由少数几台家用计算机构成的网络,也可以是数以百计的计算机构成的企业网络.VLAN ...

  8. 10款基于jquery的web前端动画特效

    1.jQuery横向手风琴图片切换动画 之前我们为大家分享过很多款基于jQuery和CSS3的手风琴菜单和手风琴焦点图插件,比如CSS3响应式垂直手风琴菜单和jQuery横向手风琴图片展示插件.今天要 ...

  9. bootstrapTable treegrid的使用

    最近打算自己弄一个后台,在整顿树形插件的时候,遇到问题,bootstrapTable treegrid最开始是怎么都显示不了树形,然后是数据出不来, 现在来记录下. 问题1:最开始怎么都显示不出来的问 ...

  10. iOS10.3 起，将支持应用内评分

    iOS10.3 起,将支持应用内评分. (2017-01-25,现在最高版本iOS10.2.1,Xcode 稳定版本Xcode8.2.1,Xcode Beta版本 Xcode8.3Beta(BW109 ...