Vue中class与style绑定

最新推荐文章于 2023-07-04 20:24:34 发布
最新推荐文章于 2023-07-04 20:24:34 发布
阅读量323 收藏 1
点赞数
分类专栏： Vue 文章标签： vue class

Vue中class与style绑定

转至：https://www.cnblogs.com/lily1010/p/5838954.html

该文主要作为学习笔记进行转载，如有侵权请联系

一 用对象的方法绑定class

很简单,举个栗子:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>class与style绑定</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div class="test">
            <div class="otherClass" :class="{'class1':name1,'class2':name2}">我是文字</div> <!--法一:用对象的方式实现-->
        </div>    
        <script type="text/javascript">
            var myVue = new Vue({
                el:".test",
                data: {
                    name1: true,
                    name2: false,
                }
            })
        </script>
    </body>
</html>

最后实现效果

 

关于使用对象绑定class,还可以用另外一种写法:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>class与style绑定</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div class="test">
            <div class="test" :class="classObj">我是文字</div> <!--法一:用对象的方式实现-->
        </div>    
        <script type="text/javascript">
            var myVue = new Vue({
                el:".test",
                data: {
                    classObj: {
                        name1: false,
                        name2: true
                    }
                }
            })
        </script>
    </body>
</html>

最后的实现效果是:

 

二 用数组的方法绑定class

很简单,举个栗子:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>class与style绑定</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div class="test">
            <div class="otherClass" :class="[class1,class2]">我是文字</div> <!--法二:用数组的方式实现-->
        </div>
        
        <script type="text/javascript">
            var myVue = new Vue({
                el:".test",
                data: {
                    class1: 'name1',
                    class2: 'name2',
                }
            })
        </script>
    </body>
</html>

实现效果:

 

其实在数组中还可以用判断是否显示这个类名,举个例子:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>class与style绑定</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div class="test">
            <div class="otherClass" :class="[class1,isShow? class2:'']">我是文字</div> <!--法二:用数组的方式实现-->
        </div>
        
        <script type="text/javascript">
            var myVue = new Vue({
                el:".test",
                data: {
                    class1: 'name1',
                    class2: 'name2',
                    isShow: false
                }
            })
        </script>
    </body>
</html>

实现效果是:

 

三  用数组和对象混合的方法绑定class

举个例子:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>class与style绑定</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div class="test">
            <div class="otherClass" :class="[class1,{class2: isShow}]">我是文字</div> <!--法二:用数组的方式实现-->
        </div>
        
        <script type="text/javascript">
            var myVue = new Vue({
                el:".test",
                data: {
                    class1: 'name1',
                    class2: 'name2',
                    isShow: true
                }
            })
        </script>
    </body>
</html>

实现的效果:

 

四 用对象的方式实现style绑定

举个例子:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>class与style绑定</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div class="test">
            <div class="otherClass" :style="{color: yanse,width: kuan + 'px' }">我是文字</div> <!--法一:用对象的方式实现-->
        </div>    
        <script type="text/javascript">
            var myVue = new Vue({
                el:".test",
                data: {
                    yanse: 'red',
                    kuan: 100,
                }
            })
        </script>
    </body>
</html>

实现效果如下:

 

其实也可以写为第二种方式:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>class与style绑定</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div class="test">
            <div class="otherClass" :style="styleObj">我是文字</div> <!--法一:用对象的方式实现-->
        </div>    
        <script type="text/javascript">
            var myVue = new Vue({
                el:".test",
                data: {
                    styleObj: {
                        color: 'pink',
                        width: '200px',
                    }
                }
            })
        </script>
    </body>
</html>

实现结果是:

 

五 用数组的方式实现style绑定

没法单独用数组的实现style绑定,或者我没有测试出来方法,写在这里纯粹是因为我有强迫症,需要占个位置

 

六 用数组和对象混合的方式实现style绑定

举个例子:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>class与style绑定</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div class="test">
            <div class="otherClass" :style="[styleObjectA,styleObjectB]">我是文字</div> <!--法一:用数组和对象的方式实现-->
        </div>    
        <script type="text/javascript">
            var myVue = new Vue({
                el:".test",
                data: {
                    styleObjectA: {
                        color: 'red',
                        width: '100px',
                    },
                    styleObjectB: {
                        top: '20px'
                    }
                }
            })
        </script>
    </body>
</html>

实现效果:

七侠剑客
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue计算属性+vue中class与style绑定(推荐)
10-15
主要介绍了vue计算属性+vue中class与style绑定,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
Vue中Class与Style绑定
weixin_33949359的博客
10-30 130
操作元素的class列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以使用v-bind处理它们：只需要通过表达式计算出字符串结果即可。不过拼接字符串比较麻烦，因此在v-bind用于class和style时，vue做了专门的增强，表达式结果的类型除了字符串之外，还可以是对象和数组。 绑定HTML Class (1) 对象...
vue Class 与 Style 绑定
窗外鸟的博客
06-14 117
操作元素的 class 列表和内联样式是数据绑定的一个常见需求 class数组语法 style语法
vue中 class与style样式绑定
weixin_44680639的博客
02-09 391
1. v-model原理 ：是基于@input/change和v-bind:value封装的语法糖 @input/change底层是 JS事件监控 V同步M v-bind:value底层是 JS的Object.defineProperty监控 M同步V 2.VUE双向绑定/响应式原理 通过触发事件打印vue模型数据，发现每个模型数据都有getter、setter方法，代表使用了 Object.defineProperty进行...
vue中class和style的绑定
weixin_68658847的博客
02-11 152
vue中class和style的绑定
Vue的Class与Style绑定的方法
12-29
本文介绍了Vue的Class与Style绑定，分享给大家，具体如下： 绑定 HTML Class 对象语法 我们可以传给 v-bind:class 一个对象，以动态地切换 class： <style> .exp{ border: 1px solid #ccc; } .forExp{...
学习vue.js中class与style绑定
10-20
主要和大家一起学习vue.js中class与style绑定操作,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vue入门-Class 与 Style 绑定
压缩疯雷的博客
10-19 126
Class 与 Style 绑定绑定 HTML Class对象语法数组语法三元表达式用在组件上绑定内联样式数组语法自动添加前缀多重值 操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。 绑定 HTML Class
vue中class绑定
m0_64544033的博客
02-15 160
vue中class绑定的方法
vue绑定class
ead_gbe的博客
07-02 3420
字符串写法：适用于样式的类名不太确定，需要动态指定的情况。代码中的backgroundColor是变量名数组写法：适用于样式的数量不太确定，名字也不太确定，需要后期动态添加或删减的。对象写法：适用于样式的数量确定，名字确定，但要动态决定用不用。
vue基础内容总结（七）
zzk00007的博客
09-27 151
Class 与 Style 绑定 操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。 绑定 HTML Class...
vue中class的绑定
就是你的博客
05-26 101
【代码】vue中class的绑定。
Vue Class与Style绑定
橘猫吃不胖的博客
12-03 702
Vue Class与Style绑定 1 Class绑定 1.1 字符串写法 1.2 数组写法 1.3 对象写法 2 Style绑定 2.1 对象写法 2.2 数组写法
Vue class与style绑定
最新发布
公子小黑的博客
07-04 43
class与style绑定
Vue中的class与style绑定
qq_45954420的博客
03-06 258
<style> .basic { width: 300px; height: 100px; border: 1px solid black; } .normal { background-color: darkorange; } .happy { background-color: burly.
VUE，Class 与 Style 绑定
weixin_43228946的博客
09-03 285
操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。
vue中如何动态绑定style和class
05-13
在Vue中，可以使用 `v-bind` 指令来动态绑定 `style` 和 `class`。 1. 绑定 `style` 可以使用以下方式来动态绑定 `style`： - 对象语法 ```html <div v-bind:style="{ color: textColor, fontSize: fontSize +...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值