vue点击按钮切换颜色（v-bind的使用）

最新推荐文章于 2024-04-11 05:37:43 发布
最新推荐文章于 2024-04-11 05:37:43 发布
阅读量1.2w 收藏 20
点赞数 4
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/caoxuecheng001/article/details/102756779
版权 
 <style type="text/css">
        div#box{
            width: 100px;
            height: 100px;
            color: darkgray;
        }
        .red{
            background-color: red;

        }
        .blue{
            background-color: blue;
        }
    </style>
</head>
<body>
<div id="app">
    <button @click="isRed=!isRed">点我切换颜色</button>

    <div id="box" v-bind:class="{red:isRed,blue:!isRed}"> 
        我是盒子

    </div>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
   const app=new Vue({
       el:"#app",
       data:{

           isRed:true
           
       }
       
   });
</script>

要点：class要转变为vue的属性，加上v-bind：或者：，class的值可以是一个对象，对象里面可以写多个属性，借助button改变isRed的值来改变颜色。

 

曹学成
关注
  • 4
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
vue实现点击按钮切换背景颜色的示例代码
10-15
主要介绍了用vue简单的实现点击按钮切换背景颜色，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
vue- 基础使用 ，v-for、v-bind、v-if/v-else、v-show、v-model、.v-on
03-08
在Vue中，有几个核心指令用于构建动态用户界面，这些指令包括`v-for`、`v-bind`、`v-if/v-else`、`v-show`、`v-model`和`.v-on`。下面将详细介绍这些指令的使用方法和场景。 1. `v-for`: 这个指令用于在DOM元素上...
vue.js 点击不同的按钮，按钮相应背景颜色改变
qq_41974250的博客
11-07 7366
<button @click="buttonClick(1)" :class="buttonIndex == 1?'bgcolor':''">月</button> <button @click="buttonClick(2)" :class="buttonIndex == 2?'bgcolor':''">季</button> <button @click="buttonClick(3)" :class="buttonIndex == 3?'bgco...
vue利用 v-bind 实现 点击变色 切换 样式
热门推荐
青蛙背蝎子过河的博客
10-05 2万+
切换样式应该是v-bind很常用的功能了.简单写一个切换样式的案例.供初学者参考吧.代码如下: &lt;p :class="{red: !isshow,blue: isshow}" @click="isshow=!isshow"&gt;我爱云虹&lt;/p&gt; export default { data() { return { isshow: true ...
点击按钮切换div及其内容（两种方法：Vue指令方式，2024年最新前端项目实战案例
最新发布
2401_83621541的博客
04-11 1252
跳槽是每个人的职业生涯中都要经历的过程，不论你是搜索到的这篇文章还是无意中浏览到的这篇文章，希望你没有白白浪费停留在这里的时间，能给你接下来或者以后的笔试面试带来一些帮助。也许是互联网未来10年中最好的一年。但是如果你不真正的自己去尝试尝试，你永远不知道市面上的行情如何。这次找工作下来，我自身感觉市场并没有那么可怕，也拿到了几个大厂的offer。在此进行一个总结，给自己，也希望能帮助到需要的同学。
vue3自定义按钮点击变颜色（切换）
IT13333的博客
01-18 925
利用动态类名，当定义isChange数值和下标index相同时，赋予act类名，实现变色效果。实现效果图： 默认选中第一个按钮，未选中按钮为粉色，点击时颜色变为红色。
vue中点击按钮变色，选中按钮后字体变色效果实现
铁锤妹妹的博客
04-29 8945
类似下图中的一个效果 默认按钮为全部，点击其他按钮时候按钮变成绿色并且文字变成白色 html模板 <div class="typeBox"> <span class="type_item" v-for="(item, index) in typeList" :key="index" :class="current_type === index ? 'typeActi
【vue】点击切换颜色
qq_44897899的博客
10-25 2870
vue学习视频链接 记录一下：点击可动态切换颜色。 代码 <div id="app"> <ul> <li v-for="(item,index) in movies" :class="{active:currentIndex === index}" @click="liclick(index)"> <!-- === 类似于 == -->
Vue使用v-bind实现点击按钮切换div的颜色
qq_51231294的博客
11-17 2581
刚刚接触Vue，先学着做一些简单的效果 点击按钮切换div的颜色 <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script> <style> #app div{ width: 200px; height: 200px; } #one{ backgro
【vue】v-bind和v-for结合实现点击li变色
m0_50789696的博客
04-29 259
<!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>v.
Vue v-bind动态绑定class实例方法
10-15
我们可以用一个方法来改变这些值，比如`reverse`方法，通过点击按钮切换`isColor`的状态： ```html 反选 ``` ```javascript methods: { reverse: function() { return this.isColor = !this.isColor; } } ``` #...
vue组件中点击按钮后修改输入框的状态实例代码
08-30
这样，点击按钮会切换`isDisabled`的值，从而改变输入框的禁用状态。 在尝试使用jQuery时，虽然可以操作DOM，但这违背了Vue的数据驱动原则，可能会导致数据和视图不一致。最后，发现可以通过移除或添加`is-disabled...
Vue v-for中的 input 或 select的值发生改变时触发事件操作
10-14
- 在Vue项目中，可以使用`v-if`和`v-else-if`来切换元素的显示状态。配合`transition`组件，可以实现平滑的过渡效果。在示例代码中，`clickZhuanMark`方法用于处理点击事件，改变`mark`属性以控制内容的展开和折叠...
03——vue动态绑定属性 v-bind动态绑定，绑定class改变数组中某一项颜色，动态绑定style
lazylYYY的博客
07-06 540
v-bind进行跳转绑定 v-bind动态绑定class（用来做点击样式） 原来 后来 其他 点击按钮字体变色 让class样式里面写的更简约：（调用自定义方法）
vue实现点击两个按钮互相切换背景色
文龙刚的博客
10-11 2301
vue实现点击两个按钮互相切换背景色
【Vue 基础】尚品汇项目-08-三级联动动态背景颜色
ChaoChao66666的博客
05-04 136
【Vue 基础】尚品汇项目-08-三级联动动态背景颜色
vue3用自定义的形式写一个点击谁谁改变背景色
Madman528的博客
11-03 932
vue 插件形式注册自定义指令 点击改变背景色
vue 使用按钮实现组件切换
imcholl的博客
04-13 1103
【代码】vue 使用按钮实现组件切换。
v-bind:class使用的小技巧和坑
SanOrintea的博客
08-30 243
vue有一个动态绑定的小技巧。 假如我想实现：isactive值为1的时候，字体是红色。值为0的时候，字体是绿色 <template> <div class='father' :class="{ change: isactive }">xxxxxx</div> </template> <script> export default { data() { return { isactive: 1, }; }, }
vue点击按钮切换颜色
05-26
你可以使用 Vue 的指令 `v-bind:class` 来动态绑定 CSS 类。例如，当按钮被点击时，可以切换一个 CSS 类来改变按钮的颜色。 HTML: ```html <button v-on:click="changeColor" v-bind:class="{ 'red': isRed }">Change Color</button> ``` Vue: ```javascript new Vue({ el: '#app', data: { isRed: false }, methods: { changeColor: function() { this.isRed = !this.isRed; } } }); ``` CSS: ```css .red { background-color: red; color: white; } ``` 现在，当用户点击按钮时，`changeColor` 方法将会在 Vue 实例中被调用，该方法将会切换 `isRed` 数据属性的值。由于 `v-bind:class` 指令绑定了 `red` 类，因此按钮的背景颜色和文本颜色将会被改变。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值