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

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. MyBatis(四)：mybatis中使用in查询时的注意事项

    准备工作 1)创建测试表jobitem CREATE TABLE "jobitem" ( "id" ) NOT NULL AUTO_INCREMENT COMM ...

  2. chrome浏览器美化插件：让您的浏览器页面冒水泡, 游小鱼儿

    下载插件和效果图 这是一个让你的浏览器冒泡泡的插件, 浏览网页的时候仿佛置身于海底世界: 插件下载地址:http://files.cnblogs.com/files/diligenceday/chro ...

  3. [开源]开放域实体抽取泛用工具 NetCore2.1

    开放域实体抽取泛用工具 https://github.com/magicdict/FDDC 更新时间 2018年7月16日 By 带着兔子去旅行 开发这个工具的起源是天池大数据竞赛,FDDC2018金 ...

  4. 如何修改启动jupyter的文件路径

    1.cmd 2.jupyter notebook 工作目录路径 办法二: 1.启动pycharm 2.创建一个ipynb文件 3.运行该文件---在打印结果中找到网址,在网页中打开即可正常显示

  5. 基于R语言的时间序列指数模型

    时间序列: (或称动态数列)是指将同一统计指标的数值按其发生的时间先后顺序排列而成的数列.时间序列分析的主要目的是根据已有的历史数据对未来进行预测.(百度百科) 主要考虑的因素: 1.长期趋势(Lon ...

  6. SignalR代理对象异常：Uncaught TypeError: Cannot read property 'client' of undefined 推出的结论 SignalR 简单示例 通过三个DEMO学会SignalR的三种实现方式 SignalR推送框架两个项目永久连接通讯使用 SignalR 集线器简单实例2 用SignalR创建实时永久长连接异步网络应用程序

    SignalR代理对象异常:Uncaught TypeError: Cannot read property 'client' of undefined 推出的结论   异常汇总:http://www ...

  7. 利用cwRsync客户端将Windows下文件同步到Linux

    这里不描述Linux服务端安装配置rsync服务的过程,有需要可以在网络上查找相关教程. 1.安装cwRsync客户端下载地址:http://itefix.no/cwrsync/下载文件cwRsync ...

  8. RDLC 根据条件改变背景颜色-多个IIF

    =IIf(Fields!DATE_DIFF.Value < 5 ,"White",IIf(Fields!DATE_DIFF.Value >=5 AND Fields!D ...

  9. Gin框架使用详解

    1.什么是Gin Gin是go编写的一个web应用框架. 2.Gin安装 go get github.com/gin-gonic/gin 3.Gin使用示例 package main import ( ...

  10. zoj 3430 Detect the Virus（AC自己主动机）

    Detect the Virus Time Limit: 2 Seconds      Memory Limit: 65536 KB One day, Nobita found that his co ...