vue根据:data-属性值绑定控制class变化

解决Vue checked更新不渲染问题
最新推荐文章于 2024-06-18 20:46:24 发布
最新推荐文章于 2024-06-18 20:46:24 发布
阅读量393 收藏 1
点赞数 1
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Sing_a_song_again/article/details/97733335
本文探讨了一个小bug：在Vue中，当v的checked属性被修改后，页面未能及时更新显示。尝试通过子组件将修改后的值传递回父组件未果。最终解决方案为，在数据修改后调用this.$forceUpdate()强制页面重新渲染，成功解决了样式添加失败的问题。

checked的初始值

 

小bug：

v的checked有被修改，但没有被渲染到页面中。

试了子组件修改后的值传回父组件没用。

最后修改数据后调用this.$forceUpdate();即可重新渲染，样式添加成功

 

Vue.js绑定class属性
tanxinji的博客
12-25 3411
绑定class属性的格式是 v-bind:class = "语句", 可以缩写为 :class ="语句" 。class属性是可以有多个的，在" "内可以有多种不同的情况。 目录 一、" "内是vue对象内存在的对象 二、" " 内为 [ ] 数组 三、 " "内为 { } json对象 一、" "内是vue对象内存在的对象 :class = " 语句"， 语句中传入的是vue建立的变量，计算属性，函数等的时候，就会把v...
Vue 计算属性和监视属性详解细节 class类绑定和style样式绑定 (四)
m0_54816834的博客
04-12 828
2.3 getter的简写（前提不考虑修改，配置setter时）3. Vue 监视属性3.1 注意事项。
vue 实现根据data中的属性值来设置不同的样式
10-14
主要介绍了vue 实现根据data中的属性值来设置不同的样式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
7.vue 侦听器和(Class 与 Style 绑定)
7TribeZ的博客
09-02 1174
计算属性 vs 侦听属性 Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。当你有一些数据需要随着其它数据变动而变动时，你很容易滥用watch——特别是如果你之前使用过 AngularJS。然而，通常更好的做法是使用计算属性而不是命令式的watch回调。细想一下这个例子： <div id="demo">{{ fullName }}</div> var vm = new Vue({ el: '#demo', data: { ...
关于vue的v-on:input结合:class监听输入框的使用
qq_41859372的博客
04-15 1040
正文之前，先吐槽一下现在网上技术文章的现状，用几个字概括就是：抄来抄去。对学习技术的伙伴和交流技术的伙伴很不友好，看的人甚是不爽和糟心。 好了，进入正文。 最近博主最近在学习vue准备给公司做一个简单的网站，于是使用了vue+elementui，后端使用的java。 其中的留言功能有输入框,就想实现一个正常的判空功能，如果在输入框未输入文字或者输入了文字然后删除了，输入框会变红；如果有文字输入则恢复正常，起到一个实时变化的效果。 其中:class用来动态产生class；v-on监听输入框的变化。
在Vue中获取自定义属性方法:data-id的实例
10-14
总结，Vue中获取自定义属性`data-id`的方法是通过事件监听器和属性绑定，结合`methods`中的函数来实现。同时，我们可以利用`localStorage`进行数据存储，通过解析URL获取参数，以及使用Vue Router进行页面导航和标题...
vue 获取元素额外生成的data-v-xxx操作
10-14
为了确保这些动态添加的元素能够应用到组件的正确样式，我们需要在添加元素之前，获取到对应父元素的`data-v-xxx`属性值，并将这个值设置到新元素上。 示例代码如下： ```javascript var nodeP = document....
Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案
08-31
Vue2.0 利用 v-model 实现组件 props 双向绑定的优美解决方案 在 Vue2.0 中，默认情况下 props 只能从父级传递到子级，无法实现双向绑定。这种设计的初衷是为了避免双向绑定可能引发的数据混乱问题。然而，在实际...
Vue v-bind动态绑定class实例方法
10-15
在这个特定的场景中，我们关注的是如何使用`v-bind`来动态绑定`class`，这是一个非常实用的功能，允许我们在运行时根据数据的变化改变元素的CSS类。 动态绑定`class`主要分为三种方式：对象语法、数组语法和字符串...
伪类的使用
qq_36571778的博客
06-11 165
&lt;p class="red"&gt;Hello,are you kain?&lt;/p&gt;css样式.red:before { content: 'red', background-color : red }1.使用javascript或者jQuery切换，增加元素的类.green:before { content: 'green'; backgroun...
伪元素选择器和伪类选择器
qq_54083224的博客
10-18 880
伪类选择器是用来向某些选择器来添加效果。不修改DOM内容，通过一些特定的选择器根据特定的状态、特定条件来修改元素的样式。伪元素选择器是一个附加在选择器末尾的关键词，通过伪元素不需要借助元素的 ID 或 class 属性就可以对被选择元素的特定部分定义样式。
Kotlin 中，data class 和普通 class
最新发布
heeheeai的博客
06-18 754
自动生成常用方法：主要用于存储数据：声明方式：例子： 普通 不自动生成常用方法：更通用：声明方式：例子： 比较 特性 普通 用途 主要用于存储数据 通用用途，适合包含复杂逻辑的类 自动生成方法 , , , , 不自动生成，需要手动实现 声明方式 代码简洁性 简化了数据类的实现，减少样板代码 需要更多的手动实现 示例 以下是一个完整的示例，展示了 和普通 的区别：
vue 根据 data 中属性的值来，动态设置 class 和 style
热门推荐
转身那一瞬
08-04 1万+
具体实现如下 1、 class 动态赋值 下面代码是 动态拼接 element-menu 的代码片段 &amp;lt;div v-for=&quot;(item,index) in menuList&quot; :key=&quot;index&quot;&amp;gt; &amp;lt;li style=&quot;font-size: 14px;&quot; @click=&quot;cl
vue通过data数据判断添加class
qq_37146616的博客
12-26 5232
现在要通过data里面的数组来判断什么时候，字体显示什么颜色 &amp;lt;template&amp;gt; &amp;lt;div v-for=&quot;ml in monlist&quot;&amp;gt; &amp;lt;div :class=&quot;[ml.classtype==3?'pink':'nol',ml.classtype==4?'green':'nol']&quot;&amp;gt;&amp
class根据状态 vue_vue 动态改变 class 属性
weixin_39722375的博客
12-20 2113
学习vue，做一个小demo，第一步需求是点击相应的色块会变色，再次点击会还原。当时思想是在 data 中用一个数组去记录每个色块的点击状态，在组件上绑定该数组，从而动态改变 class ，但是实际上 class 并没有动态改变。效果图.png代码如下：six-in-nine-vue.htmlsix-in-nine-vue:class="{'default-color': !clicked_lis...
vue中动态控制标签属性
wangming2531的博客
09-29 5858
<body> <div id="app"> <!--动态控制属性： v-bind:属性='变量' --> <img v-bind:src="src" alt="" v-on:mouseenter="change()"> <div v-bind:class="msg" v-on:mouseenter="c()" v-on:mouseleave="l()"></div> </d.
vue 设置class属性时的问题
chen1042246612的博客
04-17 773
普通情况如下 <h1 :class="{ red: true, thin: true, italic: false, active: false }">这是一个很大很大的H1，大到你无法想象！！！</h1> 上面的做法是没问题的，但若类名为这样的形式 background-color,在按照上面的做法就不行了。 解决办法: <h1 :class="{...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值