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

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. golang time打印出的值是62135596800的来源

    ' 减去62135596800是将"以公元1年1月1日0点为基准"改成"以1970年1月1日0点"为基准 所以,数据库datetime的默认值 : 0000-0 ...

  2. Javascript 函数声明、函数表达式与匿名函数自执行表达式

    函数表达式(Function Expression)注:将函数定义为表达式语句(通常是变量赋值)的一部分 //func() 错误 var func = function () { } //func() ...

  3. SpringBoot2.0集成FastDFS

    SpringBoot2.0集成FastDFS 前两篇整体上介绍了通过 Nginx 和 FastDFS 的整合来实现文件服务器.但是,在实际开发中对图片或文件的操作都是通过应用程序来完成的,因此,本篇将 ...

  4. Mybatis中自定义映射xml参数传递使用

    在使用mybatis框架时,大多时候自动生成的mapper.xml文件能满足我们所需的数据库操作,但一些情况下还是需要我们自己写sql:为了加深印象,总结了下参数传递的方式以及各个关键字的含义如下: ...

  5. CNN卷积核反传分析

    CNN(卷积神经网络)的误差反传(error back propagation)中有一个非常关键的的步骤就是将某个卷积(Convolve)层的误差传到前一层的池化(Pool)层上,因为在CNN中是2D ...

  6. 【原创 深度学习与TensorFlow 动手实践系列 - 4】第四课：卷积神经网络 - 高级篇

    [原创 深度学习与TensorFlow 动手实践系列 - 4]第四课:卷积神经网络 - 高级篇 提纲: 1. AlexNet:现代神经网络起源 2. VGG:AlexNet增强版 3. GoogleN ...

  7. pilicat-dfs 霹雳猫-分布式文件系统

    pilicat-dfs 霹雳猫-分布式文件系统 一种可以将网站图片或上传的文件,进行分布式存放的服务,可自动复制到多台物理机器,可满足高可用和负载均衡 已编译好的程序包 http://git.osch ...

  8. npm WARN React-native@0.35.0 requires a peer of react@~15.3.1 but none was installed.

    解决方案: 方法一: npm install -save react@~15.3.1 方法二:在package.json中可以添加依赖 "dependencies": { &quo ...

  9. springboot2.x接口返回中文乱码

    @Configuration public class GlobalConversConfiguration extends WebMvcConfigurationSupport { @Bean pu ...

  10. C语言 · 还款计算

    标题: 还款计算 银行贷款的等额本息还款方法是: 每月还固定的金额,在约定的期数内正好还完(最后一个月可能会有微小的零头出入). 比如说小明在银行贷款1万元.贷款年化利率为5%,贷款期限为24个月. ...