v-bind:class失效问题

最新推荐文章于 2023-08-01 15:15:58 发布

转载最新推荐文章于 2023-08-01 15:15:58 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Nora-F/p/9516124.html

文章标签：

#javascript #ViewUI

当我想通过事件改变button的样式，发现怎么也不变。可能有以下原因：

button添加了元素选择器
在 :class中最好对固定的类（f-right）的判断值true加上引号

:class="{ 'f-right': 'true','btn':isDisabled==false,'check_btn_grey': isDisabled==true}"

元素中可以存在静态样式和动态样式共存（避免冲突即可）

转载于:https://www.cnblogs.com/Nora-F/p/9516124.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_30527423

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

vue 2.x 问题3：解决在WebStorm中使用Vue的v-bind，v-on报错

To-nemy

05-05

1155

问题描述：在webstorm中写vue时使用v-on，v-bind等等一些vue语法时常出现错误提示：解决办法：在webstrom设置里找到XML，把 Unbound XML namespace prefix的勾去掉对于不同版本的 WebStorm，这个选项有可能不在同一个位置，如果按这个步骤找不到，就直接搜索 Unbound XML namespace prefix 具体步骤如下： Fi...

:class v-bind class没有效果无效果

wsy12123_的博客

11-26

2121

v-bind class失效的原因之一 :class 无效果的原因之一

参与评论您还未登录，请先登录后发表或查看评论

vue v-bind没有生效

RubyLinT的博客

07-19

1201

封装组件，调用时直接在父容器里v-bind将属性传值给组件，怎么试都没生效，后来发现是写法错了。

vue动态绑定class失效，这个原因我是真没想到，发出来大家看看

HN-XX-PYY的博客

06-27

9567

先说一下我想要实现的功能，就是点击li标签，给这个li标签加上颜色和底边框。函数里能获取到li的index下标，但是class切换没有效果 HTML代码： <ul class="menuUl"> <li v-for="(li,index) in lis" @click="SelectLi(index)" :class="{isSelectedLi:SelectedLi===index}" :key="index"> {{li}}

vue中v-for绑定数组，当数组变化时页面数据不更新，：class和：style失效的原因

qq_42661587的博客

09-07

2564

问题：点击事件里改变了数组内容，但是：class和：style没有监听到样式，从而页面样式没有一同改变。原因：根据vue的官方文档说明：Vue 包含一组观察数组的变异方法，所以它们将会触发视图更新。这些方法如下：push()pop()shift()unshift()splice()sort()reverse() splice 替换写法 array.splice(index,n,data1,data2,......); 参数 index：需要替换的元素的...

v-bind绑定class对象

03-15

235

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .active{ color:red; } </style> </head> <body> <div i

解决v-for中使用v-if或者v-bind:class失效的问题

10-17

在Vue.js开发过程中，我们经常会遇到在`v-for`循环中使用`v-if`或`v-bind:class`（简写为`:class`）时遇到一些失效的问题。这主要是由于Vue的渲染机制导致的，理解这个问题的关键在于理解Vue的响应式系统和虚拟DOM的...

<div id="app"> <div v-bind:class="{ active: isActive,'text-danger':hasError}" style="width: 200px;height: 200px;"> hi </div> <div v-bind:class="classObject" style="width: 200px;height: 200px;">h23</div> </div> <script> var vm = new Vue({ el: "#app", data: { isActive: true, hasError: true }, computed:{ classObject:function(){ return { active:this.isActive && !this.console.error, 'text-danger': this.error && this.error.type === 'fatal' } } } })为什么会什么都不显示

最新发布

03-23

用户写了一个Vue实例，里面有两个div元素，都用了v-bind:class来绑定类名。第一个div的类绑定是对象语法，根据isActive和hasError的值来添加active和text-danger类。这两个data属性都是true，所以应该这两个类都会被...

<template> <v-bottom-sheet v-model="openQuestion" :persistent="true" :hide-overlay="true" full-width color="rgb(33, 150, 243)" eager no-transition> <v-container grid-list-xl fluid pa-0> <v-layout row wrap> <v-flex lg12 xs12 sm12 md12> <v-list>  <v-flex lg12 xs12 sm12 md12 mt-0 pb-0 v-if="image"> <div style="display:flex;"> <img v-bind:src="image" v-bind:alt="'Could not display ' + image" style="display:inline-block;margin:0 auto;" /> </div> </v-flex>   <div class="iconCounter"> <div class="topLeft"> <v-tooltip right> <v-icon class="closeIcon" @click="closeQuestion" slot="activator" dark style="margin-right: 10px;">clear</v-icon> <span>To Close Question</span> </v-tooltip> <time-counter :start="startCounter" :stop="!startCounter"></time-counter> </div> <span class="font-weight-regular red--text"> {{ container }} </span> </div>  <!-- <v-flex lg12 xs12 sm12 md12 pt-0 pb-0 v-if="type === 'text' && !Questions && attribute.length === 0" style="display: flex; align-items: center; justify-content: space-between; margin-top: -28px; margin-bottom: 36px;"> <template v-if="title.length !== 1"> <div style="display: flex; flex-direction: column; width: 100%;"> <div class="titleStyle"> <div v-if="typeof (title) == 'string'"> {{ container }} </div> <div v-else> <div v-for="(item, index) in title" :key="index">{{ item }}</div> </div> 上面

03-14

好的，我现在需要帮助用户解决关于如何正确配置和使用Vuetify的v-bottom-sheet组件以及相关的Vue.js模板结构的问题。首先，我需要回忆一下Vuetify的基本知识，特别是关于v-bottom-sheet组件的用法。首先，v-bottom...

Java-Thread-Affinity：将Java线程绑定到给定的内核

02-03

首先，线程亲和性有助于减少因线程在不同核心之间迁移产生的额外开销，这种开销包括缓存失效和上下文切换。当线程长时间运行在同一个核心上时，数据会驻留在该核心对应的L1或L2缓存中，提高了访问速度。此外，避免上...

<template> <view class="content">   <unicloud-db ref="udb" v-slot:default="{data, loading, error, options}" collection="datalist"> <view v-if="error">{{error.message}}</view> <view v-else> <uni-list> <uni-list-item v-for="item in data" :key="item._id" :title="item.name" :note="item.phone" @click="rmItem(item._id)" link></uni-list-item> </uni-list> </view> </unicloud-db> </view> </template> <script setup> // import { ref } from 'vue' // const udb = ref("") const rmItem = ()=>{ rmItem(id){ this.$refs.udb.remove(id) } } // export default { // data(){ // return{ // } // }, // methods:{ // rmItem(id){ // this.$refs.udb.remove(id) // } // } // } // import { // reactive, // ref // } from 'vue'; // const title = ref("hello-mycloud") // const handleclick = async () => { // const myfunction = uniCloud.importObject("myfunction") // const res = await myfunction.say("你好，我是前端") // uni.showModal({ // content: JSON.stringify((res) // ) // }) // } </script> <style> /* .content { display: flex; flex-direction: column; align-items: center; justify-content: center; } .logo { height: 200rpx; width: 200rpx; margin-top: 200rpx; margin-left: auto; margin-right: auto; margin-bottom: 50rpx; } .text-area { display: flex; justify-content: center; } .title { font-size: 36rpx; color: #8f8f94; } */ </style>这段代码想要实现点击当前项可以删除内容，但是功能失效，是为什么

03-11

好的，我现在需要解决用户在Vue UniCloud项目中点击列表项无法删除对应内容的问题，特别是rmItem方法调用失败的原因和解决方案。让我先理清可能的原因，并逐步分析。首先，用户提到的问题涉及数据绑定和事件处理。...

动态添加的标签，class属性无效（绑定事件不可用）

Mervyn的博客

10-21

5118

前面一篇文章提到动态添加、删除一行的实现方法在项目中第一次写动态添加的时候，遇到了一个问题，就是添加的标签，之前绑定的同class事件都失效了，查资料后发现，是绑定事件使用的方法不对，下面说一下。首先是失效情况 $('.btn').click(function() { alert('点击了按钮'); }); 可以看到上面我是用.click()的方式绑定事件的，这个方法对动态添加的元...

Java程序员入门Vue基础之Class 与 Style绑定（四）

GalenGao

06-21

418

1.前言在日常开发中经常有对Dom元素动态绑定一些class属性或者style样式，我们可以使用v-bind 指令来实现效果，对于Vue指令感兴趣的同学不妨可以看一看我之前写的文章 Java程序员入门Vue基础之指令入门学习（三）。 2. 绑定HTML Class v-bind 指令主要用法就是动态的更新DOM元素上的属性，下面我们将演示在Vue中如何动态切换和更新Class。 2.1 对象语法 ...

解决在WebStorm中使用Vue的v-bind，v-on报错

zane

11-15

6944

虽然这个报错并不会影响代码执行,但看起来就像代码写错了一样,不爽解决方法: 在webstrom设置里找到XML，把 Unbound XML namespace prefix的勾去掉对于不同版本的 WebStorm，这个选项有可能不在同一个位置，如果按这个步骤找不到，就直接搜索 Unbound XML namespace prefix ...

v-bind:style关于vue实现内联样式绑定的问题

baidu_34157788的博客

12-21

1182

v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用单引号括起来) 来命名： <span class="avatar" :style="{backgroundImage:'url('+k.headImg+')'}"></s...

Vue内置指令之v-bind绑定class的介绍与举例

weixin_43275631的博客

01-26

6219

v-bind主要用于解决HTML元素属性值的绑定问题，用于响应更新HTML元素的属性，将一个或多个属性或一个组件的prop动态绑定到表达式。 v-bind绑定class，绑定方式：对象语法，含义class后面跟的是一个对象用法： 1.直接通过{}绑定一个类 <h2 :class = "{'active':isActive}">Hello World</h2> 2.通过判断传入多个值 <h2 :class="{'active':isActive

Vue.js 属性绑定 v-bind

weixin_33829657的博客

10-22

273

v-bind 主要用于属性绑定，Vue官方提供了一个简写方式 :bind，例如： <av-bind:href="url"></a> <a:href="url"></a>绑定HTML Class一、对象语法：我们可以给v-bind:class 一个对象，...

在软件webstorm中给img标签加入class报错显示错误selector matches unknow element

04-26

1131

如题，怎么也搞不懂，在其他软件没出过这种问题，偏偏在webstorm中，显示class选择器未匹配到元素；哪位大神知道怎么解决这个问题。转载于:https://www.cnblogs.com/zspersonal/p/8950142.html...

前端技术Vue学习笔记--002

weixin_46625488的博客

08-01

426

前端技术Vue学习笔记文章目录前端技术Vue学习笔记1、指令修饰符2、v-bind对于样式控制的增强2.1、v-bind对于样式控制的增强--class2.2、v-bind对于样式控制的增强--操作style3、v-model应用于其他表单元素4、计算属性4.1、**computed计算属性 vs methods方法的区别**4.2、计算属性的完整写法4.3、成绩添加案例5、watch 监视器 1、指令修饰符通过 “.” 指明一些指令后缀，不同后缀封装了不同的处理操作 —>简化代码按键修饰