v-bind绑定class

最新推荐文章于 2024-05-10 18:15:56 发布
最新推荐文章于 2024-05-10 18:15:56 发布
阅读量1.9k 收藏 2
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38996246/article/details/81408386
版权

v-bind:

<div id="app">
            <!--其中：为v-bind语法糖。它的主要用法是动态更新HTML元素上的属性-->
            <a :href="lurl">this is a link</a>
            <img :src="imgUrl"/>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script type="text/javascript">
            var app = new Vue({
                el:'#app',
                data:{
                    lurl:'https://www.taobao.com',
                    imgUrl:'https://www.github,com'
                }
            })
        </script>

 

给v-bind:class设置一个对象，可以动态地切换class，:class可以与普通class共存。

<div id="app">
            <div class="static" :class="{'active': isActive, 'error':isError}">
                
            </div>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script type="text/javascript">
            var app = new Vue({
                el:'#app',
                data:{
                    isActive:true,
                    isError:false
                }
            })
        </script>

 

当需要应用多个class时，可以使用数组语法，给：class绑定一个数组，应用一个class列表

<body>
        <div id="app">
            <div :class="[activeClass,errorClass]"></div>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script type="text/javascript">
            var app = new Vue({
                el:'#app',
                data:{
                    activeClass:'active',
                    errorClass:'error'
                }
            })
        </script>

也可以用三元表达式根据条件切换class。

一条鱼i
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
2021-07-06 使用v-bind设置样式属性:class与style设置元素样式
GAARA
07-06 645
设置vuev-bind:classv-bind:style v-bind:class v-bind:style
vue基础知识（三）
发果叁
06-27 1916
v-bind 对于类名操作的增强, 需要注意的是:class 不会影响到原来的 class 属性。:class=“对象/数组”(1) :class=“对象”{ 类名: 布尔值, 类名: 布尔值 }如果是true, 加上这个类, 如果是false, 移除这个类(2) :class=“数组”[‘类名1’, ‘类名2’, ‘类名3’]只要有这个类, 就加上:style=“对象”例如 :style=“{ width: ‘200px’ }”是 vue 为开发者提供的功能，常用于文本的格式化。过滤器主要是用来转换格式。
第六节:Vue指令:v-bind动态属性绑定
最新发布
我们专注于分享最实用的编程技术和干货，帮助你提升编程能力,感谢您的支持和关注！
05-10 977
上一小节的学习,让我们理解以v开头的指令后面跟的将是表达式,同样标签也有一些合法的标签属性.如果想将这些属性的值变为表达式,我们可以使用Vue提供的v-bind:指令.因为动态属性style的值是一个对象,因此 我们可以把对象提取出来直接作为vue 数据data属性值,那么我们就可以直接绑定一个对象就可以了。动态绑定class 就是使用v-bind指令来绑定, 一但使用v-bind指令后,class属性的值不在是一个字符串,而是一个表达式,但是一旦使用了动态绑定, `style`属性的值将变成JS表达式,
Vue内置指令之v-bind绑定class的介绍与举例
weixin_43275631的博客
01-26 5924
v-bind主要用于解决HTML元素属性值的绑定问题，用于响应更新HTML元素的属性，将一个或多个属性或一个组件的prop动态绑定到表达式。 v-bind绑定class，绑定方式：对象语法，含义class后面跟的是一个对象 用法： 1.直接通过{}绑定一个类 <h2 :class = "{'active':isActive}">Hello World</h2> 2.通过判断传入多个值 <h2 :class="{'active':isActive
Vue面试题-2
珎珎啊
07-27 9439
1.下列哪个选项是正确的插值语法？ A {value} B {{value}} C <%value%> D value 正确答案: B 解析:mustache语法 2.关于样式绑定，下面写法错误的是？（ ） A 、v-bind:class=”className” B ：class=”{{isActive && active}}” C :style=”{width: ‘200px’}” D v-bind:class=”[isActive ? activeClass
vue基础之v-bind属性、class和style用法分析
明月如霜丶
04-29 1251
一、属性 属性: v-bind:src="" width/height/title… 简写: :src="" 推荐 效果能出来，但是会报一个404错误 效果可以出来，不会发404请求 window.onload=function(){ new Vue({ el:'#box', data:{ url:'https:...
Vue.js中用v-bind绑定class的注意事项
10-20
关于数据绑定一个常见...因为它们都是属性，我们可以用 v-bind 处理它们，但是使用v-bind绑定class的时候我们要有一些注意事项，下面这篇文章就给大家分享了下要注意的方面，希望能对大家有所帮助，下面来一起看看吧。
Vue v-bind动态绑定class实例方法
10-15
在这个特定的场景中，我们关注的是如何使用`v-bind`来动态绑定`class`，这是一个非常实用的功能，允许我们在运行时根据数据的变化改变元素的CSS类。 动态绑定`class`主要分为三种方式：对象语法、数组语法和字符串...
详解vue中v-model和v-bind绑定数据的异同
10-14
本篇文章将深入解析Vue中的两种主要数据绑定方式：`v-model` 和 `v-bind`，以及它们之间的异同。 `v-bind`（通常简写为 `:`）主要用于单向数据绑定，即将Vue实例中的数据属性绑定到HTML元素的属性上。例如，使用 `v...
vue学习：单向绑定(v-bind)和双向绑定(v-model)
daokoi的博客
03-24 4228
单向绑定和双向绑定* 单向绑定 v-html、v-text、插值表达式{{}}、v-bind都是单向绑定，即数据改变，页面元素也会跟着改变；而页面元素改变时，数据并不会跟着变。 v-bind是对html标签的属性进行绑定，其缩写为冒号（:）,例如：(v-bind:href)可以写为(:href)。 以v-bind为例来说明单向绑定： <!-- 给html标签的属性绑定 --> <div id="app"> <a v-bind:href="link">ogogo
vue入门：v-bind:class
计算机图形学
02-05 1136
v-bind:class 对普通属性绑定进行扩展，普通属性绑定只支持表达式。扩展为支持三目表达式、对象、数组 三目表达式 支持单个class是否添加的控制如 v-bind:class="isRed?'red':''" 对象 支持多个class 同时控制例如 v-bind:class="classObj" classObj:{ red:true, green:false, blue:true } 数组 实现动态添加、删除class v-bind:class="classArray" classA
vue之v-bind属性绑定
itboy
12-09 4829
vue之v-bind属性绑定demo: &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Vue demo&lt;/title&gt; &lt;!--引入vue 依赖项--&gt;
v-bind:class
qq_36981190的博客
11-16 768
1、数组语法 我们可以把一个数组传给 v-bind:class，以应用一个 class 列表： <div v-bind:class="[activeClass, errorClass]"></div> 注意：1、activeClass和errorClass若是不带单引号则需要在data中定义， 2、若v-bind:class="[‘activeClass’, ‘errorClass’],带单引号的话则不要定义，直接在style中写样式 ...
vue动态绑定多个class
sophia_xiaoma的专栏
07-04 2001
<li class="li-tab" v-for="(item,index) in tabsParam" @click="toggleTabs(index)" :class="[{active:index==nowIndex},index==0?'li-tab-left':'li-tab-right']">{{item}} </li> 仅作自查 ...
Uni-App - Class 与 Style 绑定
牧码的博客
02-19 8279
为节约性能，我们将 Class 与 Style 的表达式通过 compiler 硬编码到 uni-app 中，支持语法和转换效果如下： class 支持的语法: &lt;view :class="{ active: isActive }"&gt;111&lt;/view&gt; &lt;view class="static" v-bind:class="{ active: isActi...
Vue 中动态添加class（使用v-bind:class）
weixin_30262255的博客
10-23 677
今天在Vue中动态修改类名，元素的样式就是不改变，类名也没有加上去，里面的问题具体我还是不太清楚，有可能是因为自己不认真，把 :class= 后面的内容的格式给整错了，下面将正确的做法记录一下，便于以后查看。 用法一： 参考： HTML示例： //将下面nav_datas数组中的数据给渲染出来，并利用nav_datas中的class_true的boolean值来表示该元素类名是否存在 &lt...
vue动态绑定class
Ammy的成长
01-01 9101
1.v-bind:class 一个对象，以动态地切换 class： <div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"> </div> 结果为：<div class="static active"></div>2.样式动态绑定对象<div v-bind
v-bind动态绑定class(对象语法)
qq_41768447的博客
07-30 748
v-bind指令： 作用：动态绑定属性； 缩写：：(也叫语法糖写法) 预期：any｛withargument｝|Object{withoutargument} 参数：attrOrProp{optional} <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="...
vue之v-bind踩坑系列——绑定src
weixin_42761614的博客
01-27 1225
vue之v-bind踩坑系列之绑定src v-bind在绑定img标签中的src属性时，vue会把相对地址解析成字符串，而非路径所以会导致图片无法正常显示 无法生效的代码 `<tab-bar-item v-for="i in 4"> <img slot="item-icon" :src="'./assets/img/tabbar/'+tabbaricon[i-1]+'.svg'" alt=""> </tab-bar-item>` data(){ retur

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值