Vue绑定样式

最新推荐文章于 2024-03-11 18:22:52 发布
最新推荐文章于 2024-03-11 18:22:52 发布
阅读量437 收藏 1
点赞数
分类专栏： vue2+vue3 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mantou_riji/article/details/125813932
版权

文章目录

绑定class样式

步骤：

  • 不变的样式和改变的class分开写，动态的class使用 v-bind进行绑定
  • vue中设置class的相关属性
  • 设置方法，当事件触发调用相关方法，修改相关样式从而影响class属性，修改样式。

绑定方法——字符串写法

适用于:样式的类名不确定,需要动态指定
eg：
需求：点击修改背景颜色
即点击之后随机选择.happy，.sad，.normal三个类中的一个

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <style>
        .basic{
            width: 500px;
            height: 200px;
            border: 2px black solid;
        }

        .happy{
             background:-webkit-linear-gradient(top,white,rgb(255, 234, 188),rgb(235, 150, 135));
        }
        .normal{
             background:-webkit-linear-gradient(top,white,lightblue,skyblue);
        }
        .sad{
             background:-webkit-linear-gradient(top,white,rgb(128, 128, 128),rgb(57, 57, 57));
        }

        .style1{
            background-color: coral;
        }
        .style2{
            font-size: 30px;
            text-shadow:2px 3px 5px pink;
        }
        .style3{
            border: 5px solid sandybrown;
        }

    </style>
</head>
<body>
    <div id="root">
        <!-- 不变的样式和改变的class分开写 -->
        <div class="basic" :class="mood"  @click="changeMood">{{name}}</div>
    </div>
    <script type='text/javascript'>
    Vue.config.productionTip = false;
    new Vue({
        el:'#root',
        data: {
            name:"yang",
            mood:"normal"
        },
        methods: {
            changeMood(){
                const arr =['normal','happy','sad']
                const index = Math.floor(Math.random()*3)
                this.mood=arr[index]
            }
        },
    })
    </script>
</body>
</html>

在这里插入图片描述
在这里插入图片描述

绑定方法——数组写法

适用于：要绑定的样式个数不确定、名字也不确定

需求：动态绑定style1，style2，style3样式，以便在控制台调试

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <style>
        .basic{
            width: 500px;
            height: 200px;
            border: 2px black solid;
        }

        .happy{
             background:-webkit-linear-gradient(top,white,rgb(255, 234, 188),rgb(235, 150, 135));
        }
        .normal{
             background:-webkit-linear-gradient(top,white,lightblue,skyblue);
        }
        .sad{
             background:-webkit-linear-gradient(top,white,rgb(128, 128, 128),rgb(57, 57, 57));
        }

        .style1{
            background-color: rgb(179, 220, 255);
        }
        .style2{
            font-size: 30px;
            text-shadow:5px 5px 5px yellow;
        }
        .style3{
            border-radius: 5px;
            border: 2px solid yellow;
        }

    </style>
</head>
<body>
    <div id="root">
        <!-- 不变的样式和改变的class分开写 -->
        <!-- <div class="basic" :class="mood"  @click="changeMood">{{name}}</div> -->
        <br>
        <br>
        <div class="basic" :class="arr">{{name}}</div>
    </div>
    <script type='text/javascript'>
    Vue.config.productionTip = false;
    const vm = new Vue({
        el:'#root',
        data: {
            name:"yang",
            mood:"normal",
            arr:["style1","style2","style3"]
        },
        methods: {
            changeMood(){
                const arr =['normal','happy','sad']
                const index = Math.floor(Math.random()*3)
                this.mood=arr[index]
            }
        },
    })
    </script>
</body>
</html>

在这里插入图片描述
在这里插入图片描述

绑定方法——对象写法

对象写法，适用于:要绑定的样式个数确定、名字也确定，但要动态决定用不用
需求：实现固定class样式的绑定和取消

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <style>
        .basic{
            width: 500px;
            height: 200px;
            border: 2px black solid;
        }

        .happy{
             background:-webkit-linear-gradient(top,white,rgb(255, 234, 188),rgb(235, 150, 135));
        }
        .normal{
             background:-webkit-linear-gradient(top,white,lightblue,skyblue);
        }
        .sad{
             background:-webkit-linear-gradient(top,white,rgb(128, 128, 128),rgb(57, 57, 57));
        }

        .style1{
            background-color: rgb(179, 220, 255);
        }
        .style2{
            font-size: 30px;
            text-shadow:5px 5px 5px yellow;
        }
        .style3{
            border-radius: 5px;
            border: 2px solid yellow;
        }

    </style>
</head>
<body>
    <div id="root">
        <!-- 不变的样式和改变的class分开写 -->
        <!-- <div class="basic" :class="mood"  @click="changeMood">{{name}}</div> -->
        <!-- <br>
        <br>
        <div class="basic" :class="arr">{{name}}</div> -->
        <br>
        <br>
        <div class="basic" :class="classObj">{{name}}</div>
    </div>
    <script type='text/javascript'>
    Vue.config.productionTip = false;
    const vm = new Vue({
        el:'#root',
        data: {
            name:"yang",
            mood:"normal",
            arr:["style1","style2","style3"],
            classObj:{
                style1:false,
                style2:false,
                style3:false
            }
        },
        methods: {
            changeMood(){
                const arr =['normal','happy','sad']
                const index = Math.floor(Math.random()*3)
                this.mood=arr[index]
            }
        },
    })
    </script>
</body>
</html>

在这里插入图片描述

class样式小结

写法:class="xxx"，xxx可以是字符串、对象、数组。
字符串写法适用于:类名不确定,要动态获取。
对象写法适用于:要绑定多个样式,个数不确定,名字也不确定。
数组写法适用于:要绑定多个样式，个数确定，名字也确定，但不确定用不用。

绑定style样式

style对象写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <style>
        .basic{
            width: 500px;
            height: 200px;
            border: 2px black solid;
        }
    </style>
</head>
<body>
    <div id="root">
        <div class="basic" :style="styleObj">{{name}}</div>
    </div>
    <script type='text/javascript'>
    Vue.config.productionTip = false;
    const vm = new Vue({
        el:'#root',
        data: {
            name:'yang',
            styleObj:{
                fontSize:'40px'
            }
        }
    })
    </script>
</body>
</html>

在这里插入图片描述

style数组写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <style>
        .basic{
            width: 500px;
            height: 200px;
            border: 2px black solid;
        }
    </style>
</head>
<body>
    <div id="root">
        <!-- <div class="basic" :style="styleObj">{{name}}</div> -->
        <div class="basic" :style="styleArr">{{name}}</div>
    </div>
    <script type='text/javascript'>
    Vue.config.productionTip = false;
    const vm = new Vue({
        el:'#root',
        data: {
            name:'yang',
            styleObj:{
                fontSize:'40px'
            },
            styleArr:[
                {
                    fontSize:'40px'
                },
                {
                    backgroundColor:'pink'
                }
            ]
        }
    })
    </script>
</body>
</html>

在这里插入图片描述

style样式小结

对象写法：:style="{fontSize: xxx}"其中xxx是动态值
数组写法：:style="[a,b]“其中a、b是样式对象。

_洋
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 动态绑定背景图片的方法
10-18
主要介绍了vue 动态绑定背景图片的方法,在文末给大家介绍了vue如何给v-for循环的标签添加背景图片，需要的朋友参考下吧
Vue 样式绑定的实现方法
10-17
学习 Vue 的时候觉得样式绑定很简单，但是使用的时候总是容易搞晕自己。这篇文章主要介绍了Vue 样式绑定的实现方法，感兴趣的小伙伴们可以参考一下
Vue（三）：样式绑定、条件渲染、列表渲染、列表过滤与列表排序
最新发布
m0_73560798的博客
03-11 862
绑定样式：1.class样式写法：class="xxx”xxx可以是字符串、对象、数组。字符串写法适用于：类名不确定，要动态获取。对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。2.style样式:style="{fontSize:xxx}"其中xxx是动态值。:style="[a,b]"其中a、b是样式对象。1、用于展示列表数据。
前端框架Vue----设置样式
weixin_45228198的博客
12-13 2425
目录设置class样式 设置class样式 class样式动态切换 <div class='s1' v-bind:class="s2">样式2</div> <div class="s1" :class='s3'>样式3</div> 只需动态改变s2属性、s3属性的值即可。
Vue教程：如何使用Div标签实现单选框与多选框按钮以便我们随意调整样式
wfeil211的博客
02-27 4048
Vue教程：如何使用Div标签实现单选框与多选框按钮以便我们随意调整样式
vue实现给同级div添加样式
qq_40576178的博客
03-15 1924
页面中多个div，点击当前div显示激活的 样式，别的去掉激活的样式 <div class="buttonText" :class="{activeOrange:active==2}" @click="commonClick('电力部')">电力部</div> <div class="buttonText" :class="{activeOrange:active==3}" @click="commonClick('化工部')">化工部</div> <
js list删除指定元素_vue.js
weixin_39545017的博客
11-25 2000
vue.js 中M V MV代表哪一部分 <插值表达式（v-cloak v-text v-html v-bind（缩写是:） v-on（缩写是@） v-model v-for v-if v-show ）<body> <div id="app"> <!-- 使用 v-cloak 能够解决 插值表达式闪烁（在网络不好的...
div添加样式 vue_vue 添加样式分几种方法
weixin_39765057的博客
12-19 2328
一.new Vue({el: '#app',data: {isActive: true}})二.v-bind:class="{ active: isActive, 'text-danger': hasError }">new Vue({el: '#app',data: {isActive: true,hasError: true}})三..active {width: 100px;heigh...
怎么用vue修改样式
weixin_48047636的博客
05-18 2874
css <style> .ok{ padding: 10px; background-color: green; color: white; } .err{ padding: 10px; background-color: red; color: #fff; } </style
Vue动态改变样式的5种方法
BianHuanShiZhe的专栏
12-23 6256
1 第一种方法 <div :class= "{'active':isActive}" > 文字</div> 2 第二种方法 <div class="activeOne" :class= "{activeTwo:isActive,'activeThree': hasError}" > 文字</div> 3 第三种方法 <div :class="classObject"> 文字</div> 4 第四种方法 <
JAVA学习笔记—JAVA WEB（二）JAVA WEB核心（下）
qq_40850871的博客
12-16 322
文章目录4. EL和JSTL核心技术4.1 EL表达式4.1.1 基本概念4.1.2 主要功能4.1.3 访问内置对象的数据4.1.4 访问请求参数的数据4.1.5 访问Bean对象的属性4.1.6 访问集合中的数据4.1.7 常用的内置对象4.1.8 常用的运算符4.2 JSTL标签4.2.1 基本概念4.2.2 使用方式4.2.3 常用核心标签4.2.4 常用函数标签4.2.5 常用格式化标签4.2.6 自定义标签5. Filter+Listener核心技术5.1 Filter过滤器5.1.1 基本概念
Vue绑定内联样式问题
10-17
主要介绍了Vue绑定内联样式的相关知识，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
Vue如何设置样式
weixin_35754962的博客
01-03 1127
Vue中有几种方式可以设置样式： 在组件的 style 标签内写入 CSS 代码，这种方式的样式只会应用到当前组件： <template> <div> <!-- 组件的模板代码 --> </div> </template> <style> /* CSS 代码 */ </style> <...
Vue 在for循环中动态添加类名及style样式集合
Shivy_的博客
02-23 4761
Vue 在for循环中动态添加类名及style样式集合
vue中实现div可编辑，并插入指定元素，样式
weixin_44727080的博客
07-02 5392
vue中实现一个既可以编辑内容，有可以动态编辑内容插入一个带有样式的内容，改变默认内容后，这个样式消失的效果，这里来整理下调研与解决实现问题之路。
vue给div设样式写法
m0_60319327的博客
01-14 862
this.$refs.con3c.style =`background-size:${100/(2*this.clo)}% ${100/(4*this.row)}%`
第五节——Vue 中如何编写样式
weixin_57017198的博客
10-25 1225
默认情况下，只要导入了组件，不管组件有没有显示在页面中，组件的样式就会生效。CSS IN JS 的具体实现有 50 多种，比如：React常用（CSS Modules、styled-components）、 Vue常用（ 、css modules）等。如果你的引入了第三方库，如果你想修改第三方库的样式，直接通过dom查找，修改样式是没有效果的。在style标签上使用scoped，当 标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素。
Vue 11 - 绑定css和style样式
m0_53753920的博客
04-05 162
1. 点击一个div区域，随机变化4中css样式。2. 将一个div模块绑定style样式3. 要求： 都需要交给vue托管。
【vue练习】vue组件自定义样式、vue组件设置不同样式
weixin_52941842的博客
05-11 4613
以自定义组件输入框为例 给输入框动态绑定style变量，变量为一个对象，当然也可以是单个样式，多个样式的时候用变量 <template name="Search"> <div class=""> <div > <input type="text" v-model="searchText" placeholder="请输入" @focus="searchFocus"
vue 绑定切换样式
05-24
你可以使用 Vue 的条件渲染和绑定 class 属性来实现切换样式。例如： ```html <button @click="toggleActive">Toggle Active export default { data() { return { isActive: false } }, methods: { ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值