vue里的样式添加之类名改动 和style改动

时间：2022-12-13 21:30:21

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

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 里面绑定样式属性 &quest;

    在 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. &lbrack;转&rsqb;vue数据绑定&lpar;数据&comma;样式&comma;事件&rpar;

    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&period;js（7）--vue中的样式绑定

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

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

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

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

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

随机推荐

  1. nginx问题收集

     1.问题: 用户在微信授权成功之后, 跳转到网页时, 出现nginx的错误界面, 复制当前这个链接在网页中打开则正常显示, 同时nginx日志文件中报错(upstream sent too big ...

  2. Guava库介绍之集合&lpar;Collection&rpar;相关的API

    作者:Jack47 转载请保留作者和原文出处 欢迎关注我的微信公众账号程序员杰克,两边的文章会同步,也可以添加我的RSS订阅源. 本文是我写的Google开源的Java编程库Guava系列之一,主要介 ...

  3. alias实现命令别名

    需要经常进入/srv/www/app/account这个目录,每次都得重复的输入这一长串路径进入该目录,显得麻烦而费时,因此可以将"cd /srv/www/app/account" ...

  4. CSRF 攻击介绍

    CSRF是什么? CSRF(Cross-site request forgery),中文名称:跨站请求伪造,也被称为:one click attack/session riding,缩写为:CSRF/ ...

  5. SharePoint 2013 - REST API about Content

    1. 获取所有子站点信息(Sub Site): var subSitesInfo = "{0}/_api/Web/WebInfos?$orderby=Title desc"; // ...

  6. hdu 2665 Kth number

    划分树 /* HDU 2665 Kth number 划分树 */ #include<stdio.h> #include<iostream> #include<strin ...

  7. Minimum Spanning Trees

    Kruskal’s algorithm always union the lightest link if two sets haven't been linked typedef struct { ...

  8. Django--CRM--菜单排序等

    一 . 菜单排序 1.我们想把菜单排序.首先给菜单加上权重,权重大的排在上面, 这就要在菜单表上加上一个权重字段. 2. 我们在菜单表里面把权重改一下 3. 需要把权重字段的信息拿出来放到sessio ...

  9. 月日加四位尾数编号生成 VB方式

    <%Private Sub Form_Click()MsgBox "生成两位后缀"ClsFor i = 1 To 99barcod= Format(Right(Year(Da ...

  10. java-appium-527 WebDriver协议&amp&semi;针对控件的操作

    1.WebDriver协议 https://www.w3.org/TR/webdriver/#list-of-endpoints 1.1查看当前所有的session情况 http://127.0.0. ...

相关文章