Vue在计算之前读取v-bind:class
是指在Vue中使用v-bind指令绑定class属性时，Vue会在计算属性之前先读取class的值。v-bind:class用于动态地绑定一个或多个class，可以根据条件来决定是否添加某个class，从而实现样式的动态变化。
具体来说，v-bind:class可以接受以下几种形式的参数：
- 字符串：可以直接传入一个字符串作为class的值，例如：v-bind:class="'red'"，表示将元素的class设置为"red"。
- 对象：可以传入一个对象，对象的key表示class名称，value表示是否添加该class。例如：v-bind:class="{ red: isActive }"，isActive为true时，元素的class将包含"red"。
- 数组：可以传入一个数组，数组的每个元素可以是字符串、对象或数组。例如：v-bind:class="[activeClass, errorClass]"，activeClass和errorClass可以是字符串或对象，表示将这些class应用到元素上。
v-bind:class的应用场景包括但不限于以下几种：
- 根据条件动态添加/移除class：可以根据某个条件来决定是否添加某个class，实现样式的动态变化。
- 根据数据状态切换class：可以根据数据的不同状态来切换不同的class，例如根据用户是否登录来显示不同的样式。
- 根据用户交互添加/移除class：可以通过监听用户的交互事件，动态地添加或移除class，实现交互效果。
在腾讯云的相关产品中，可以使用腾讯云的云服务器（CVM）来搭建Vue应用的后端环境，使用云数据库MySQL版（TencentDB for MySQL）来存储应用的数据，使用云存储（COS）来存储静态资源文件，使用云函数（SCF）来实现后端逻辑，使用CDN加速来提高前端页面的加载速度。
腾讯云产品介绍链接地址：
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云数据库MySQL版（TencentDB for MySQL）：https://cloud.tencent.com/product/cdb_mysql
- 云存储（COS）：https://cloud.tencent.com/product/cos
- 云函数（SCF）：https://cloud.tencent.com/product/scf
- CDN加速：https://cloud.tencent.com/product/cdn
相关·内容
2回答
在Vue.js中，如何定位/检测单击的元素来执行基本的切换类？
我已经写了这段代码，它可以成功地切换，但是当你点击一个a时，这个类就会应用到所有的li
HTML
<ul id="app" class="projects">
<li v-bind:class="dyClass"><a href="" v-on:click.prevent.stop="show = !show">Project A</a></li>
<li v-bin
浏览 4提问于2018-09-18得票数 2
1回答
访问子组件计算属性的Vue
、、、、
因此，我使用了一个名为“vue -tree-list”的第三方vue组件，这是链接->
在组件中，它具有一个计算属性，它基本上分析树结构，以找到插入新的叶/节点的正确位置。
在我的父组件中，我这样做了：
<template>
<div class="py-8 px-5" style="min-height: calc(100vh - (112px + 2.75rem))">
<div class="flex flex-col w-full">
<button class=&
浏览 0提问于2022-04-09得票数 0
回答已采纳
在我的Vue 3.0.5应用程序中，我希望通过单选按钮在<div>元素之间切换，即一次只显示一个元素。如果我在输入元素中的value参数前面加上了v-bind，虽然我已经用v-model赋值了，那么它就能工作。但是，我不明白为什么。
我还使用单选按钮来选择升序/降序(我实现了一个用于排序的computed函数，该函数使用了asc/desc的变量)：这在没有v-bind的情况下有效。
我不清楚为什么这种行为是不同的。有人能解释吗？
使用v-bind的示例
<!DOCTYPE html>
<html>
<head>
<script
浏览 1提问于2021-02-11得票数 0
回答已采纳
我使用的是vuejs2。我想在我的组件中创建一个方法，然后调用它来绑定一个类到它，但是我不能让它工作。这是我或多或少想要完成的，理想情况下，getMachineClass()应该是我的机器组件中的一个方法。
<machine
v-for="item in machinesList"
v-bind:key="item.id"
v-bind:machine="item"
v-bind:class="item.getMachineClass()">
</machine&g
浏览 0提问于2018-03-07得票数 0
1回答
我在这段代码中有一个问题
let bus = new Vue();
Vue.component('building-inner', {
props: ['floors', 'queue'],
template: `<div class="building-inner">
<div v-for="(floor, index) in floors" class="building-floor" :ref="'floor' + (floo
浏览 0提问于2017-11-05得票数 0
我正在处理一个由DataTypeObject (dto)生成的动态表单。现在，我在创建递归组件时遇到了以下警告，该警告指向与其父组件具有相同类型的所有组件列表：
vue.runtime.esm.js?2b0e:619 Vue警告:未知的自定义元素：-您正确注册了组件吗？对于递归组件，请确保提供"name“选项。
下面是代码片段：
第一个是，基于那个dto.type，应该显示什么类型的组件。
<template>
<div class="field">
<NumberInputComponent
v-if=&#
浏览 6提问于2020-12-21得票数 0
首先，我将学习如何使用Vue.js 2和Axion使用WP。我设法初始化了一个请求，并在v指令中显示了我所有的帖子。试图从来自json请求的post列表中创建一个简单的筛选器，我无法访问这些数据：
var App = Vue.extend({});
var postList = Vue.extend({
template:'#post-list-template',
data (){
return {
posts: null
}
},
mounted (){
浏览 6提问于2021-01-25得票数 2
回答已采纳
2回答
鉴于这些道具：
someBool = true;
someString = 'set-class'
这将在conditional-class为真时将someBool作为类添加到元素中：
v-bind:class="{'conditional-class': someBool}"
这将将set-class作为类添加到元素中：
v-bind:class="someString"
如何将这两种语法混在一起？
Tried:
v-bind:class="{'conditional-class': someBool}&
浏览 0提问于2019-06-20得票数 1
回答已采纳
我最近一直在与Vue js和Laravel合作，我试图从一个源获取一个图像，图像源包含一个基本路径和一个vue支柱数据。但问题是，它返回一个错误，说明vue不能计算表达式。任何帮助都将不胜感激
<a class="thumbLink"><img data-large="url('uploads/products/285x380/@{{
itemDetails.product_image}}')" alt="img" class="img-responsive"
src="
浏览 5提问于2016-07-16得票数 3
回答已采纳
2回答
我刚刚开始使用Vue.js；它的功能给我留下了深刻的印象，但在解析文档中的基础知识时遇到了麻烦。
假设某些复选框或选定的多个
<label><input v-model="fruits" type="checkbox" value="apple"> apple</label><br>
<label><input v-model="fruits" type="checkbox" value="orange"> orange<
浏览 0提问于2016-02-27得票数 2
回答已采纳
1回答
我试图使用setInterval与我的函数moveImage，它改变了我的形象的位置！这是我的代码：
<template>
<div class="randImg">
<img v-bind:style="{top: imgTop + 'px', left: imgLeft + 'px',height: imgHeight + 'px', width: imgWidth + 'px'}"
class="image" v-bi
浏览 0提问于2019-03-19得票数 0
回答已采纳
从萨拉·德拉斯纳( Sarah )的“粉碎杂志”( theme )的文章“”中得到灵感，我在Wordpress主题中用Vue替换了我所有的jQuery。事情进展顺利，因为我已经取代了modals的功能，表单验证/提交，类似的。我甚至从Google的页面速度洞察力工具中得到了页面速度的提升。
我的最后一块拼图是完成我的导航菜单。菜单是建好的，正在工作，但我对它不满意。我最不满意的地方是有条件地将子菜单做得更好。例如，没有子的菜单项接收空子：
<ul class="submenu"></ul>
到目前为止，我的情况如下：
以下是我的Nav菜单数据的形状：
重
浏览 3提问于2018-08-20得票数 1
我有一个基类，如下所示
import Vue from "vue";
class ComponentBase extends Vue {
constructor() {
super();
this.left = 100;
this.top = 100;
this.isSelected = false;
}
public left: number;
public top: number;
public isSelected: boolean;
public sele
浏览 0提问于2018-02-12得票数 2
回答已采纳
我在用Vue做手推车应用。试图做数量计数器，但当我点击-或+按钮，所有项目的数量也增加或减少。
所以似乎我需要给每个按钮的钥匙，但我不知道如何做。
new Vue({
el: '#app',
data(){
return {
foods: [{
id: 1,
imgUrl: 'https://image.shutterstock.com/image-photo/healthy-food-clean-eating-selection-260nw-761313058.jpg',
t
浏览 0提问于2019-08-16得票数 1
回答已采纳
1回答
我试图通过动态添加Vue Js来使用Vue Js中的引导数据报警器，但它没有初始化。
<div v-for="(aligner,index) in aligners" v-bind:key="aligner">
<input type="hidden" v-bind:name="'AlignerDetails[' + index + '].BatchNo'" v-bind:value="'AlignerDetails_' + (index + 1) + &
浏览 2提问于2018-10-02得票数 1
1回答
我正在为我的数据做排序和筛选。我有一些API的卡片。对于排序，我有很少的问题(按价格排序，按时间排序，等等)。默认的排序是按价格排序，它已启用。
过滤器是应该显示/隐藏我的卡片的输入(例如:最低价格和最高价格的范围)。
我已经完成了筛选，但是当我尝试按时间对项目排序时，筛选器的v显示逻辑从以前的排序中保存下来(按价格排序)
卡来自挂载() axios响应
Result.vue
用于排序的按钮
<div class="sort-btn down" v-bind:class="{ activesort: activesort }"
v-on:clic
浏览 2提问于2018-08-10得票数 2
回答已采纳
我想将内联样式绑定到包含v-for的div。但它似乎总是忽略了v-bind。这是模板和数据。
<template>
<div id="app">
<div v-bind:style="styleObject" v-for="collection in collections" :key="collection.id">
<a v-bind:href="collection.pageurl">
<
浏览 1提问于2017-12-02得票数 0
1回答
如何使用v-if的结果在Vue中呈现两个不同的组件？如果这很重要，我也会在使用TreeView渲染v-for时尝试这样做。到目前为止我已经试过了。
TreeView.vue：
<template>
<span>
<ul v-show="isOpen" v-if="isFolder">
<p
v-for="(child, index) in item.children"
v-bind:item=&
浏览 2提问于2020-07-26得票数 1
回答已采纳
vue文档说我可以这样做：
<div v-for="(value, name) in object">
{{ name }}: {{ value }}
</div>
但当我这么做的时候我得到：
Module Error (from ./node_modules/eslint-loader/index.js):
7:5 error Elements in iteration expect to have 'v-bind:key' directives vue/require-v-for-key
我可以说
<di
浏览 3提问于2020-09-24得票数 1
2回答
我通过遍历payeefundingAccountList在Vue中创建了以下列表。
<cx-select id="payee-select" @cxChange="changeSelectedPayee" class="dropdown">
<option value="" disabled selected>Choose payment account</option>
<option
v-for="(account, index) in payeefunding
浏览 0提问于2020-06-12得票数 0
尝试在父组件状态更改时更新子组件。当我在Day.vue中更改date状态时，我可以看到计算出的函数正在工作，但是<EntryList>组件没有使用我传入的新日期进行更新。 Day.vue <template>
<div id="daily">
<div id="nav">
<div class="nav">
<button @click="changeDay(-1)" class="arrow">←&l
浏览 22提问于2021-04-28得票数 0
回答已采纳
1回答
Vue组件没有渲染，也没有错误，但它加载了vue cdn。任何内容都不能代替组件。
<!DOCTYPE html>
<head>
<title>Vue</title>
</head>
<body>
<blog-post :title="My journey with Vue"></blog-post>
<blog-post v-bind:title="Blogging with Vue"></blog-post&
浏览 0提问于2019-07-24得票数 0
我目前正在尝试创建一个包含多个“输入字段”组件的注册表单，一旦按下提交，这些组件都需要验证。它们目前都在更改文本时自动验证，但我发现很难对所有输入字段进行全局调用来验证所有输入字段。我试图实现的是：，但是validateAll()方法没有附加到它的字段。
我尝试用email & confirm_email填充validateAll()，这得到了我想要的结果，但是错误消息不会显示在字段旁边。
任何帮助都将不胜感激！
ValidatedInputField.vue：
<template>
<div class="form-control" v-bin
浏览 5提问于2016-12-07得票数 11
回答已采纳
1回答
如何切换类的body标记，我已经尝试了几种方法来解决我的问题，但仍然收到错误信息，并没有任何想法。这就是我的故事：
在body标记上，我添加了v-bind:class。
<body id="app" v-bind:class='{active:showModal}'>
然后我收到了这些错误：
[Vue warn]: v-bind:class="{active:showModal}": attribute interpolation is not allowed in Vue.js directives and specia
浏览 1提问于2016-03-16得票数 3
我们能直接绑定值吗
v-bind:value="'India'"
假设我有场，
<input id="country" type="text"
class="form-control"
name="country" placeholder="country" v-bind:value="'India'" v-model="fields.country">
抛错
v-bind: value =“
浏览 2提问于2020-08-01得票数 2
回答已采纳
1回答
问题如下，我基本上有一个组件是'card‘，我使用v-for在名为'dash’的Vue中呈现卡片。现在我要做的是向卡片添加一个单击事件，并且在我的组件中声明了一个名为expand的方法，但当我尝试这样做时，我得到一个错误。我的HTML代码如下所示 <div id="dash" class="dash" style="margin-left: 350px; margin-top:50px;">
<div v-for="state in states" class="
浏览 18提问于2019-06-22得票数 1
回答已采纳
因此，我使用vuejs，并试图添加一个三元操作符或一些将而不是强制应用v绑定类的内容。即使数据是假的，它仍然应用css类。我怎么才能防止这件事？
new Vue({
el: '#cal',
data: {
January: 'no',
February: 'no',
March: 'no',
April: 'yes',
May: 'yes',
June: 'yes',
July: 'no',
浏览 4提问于2018-06-01得票数 2
回答已采纳
我在自学Vue.js.我使用v-bind将突出显示类添加到span元素中，这应该是向元素添加newBorder样式，但是样式没有得到应用。
<!DOCTYPE HTML>
<html>
<head>
<title>Intro to v-bind</title>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
浏览 3提问于2022-04-17得票数 3
回答已采纳
Vue.component("blog-post", {
props: ["post"],
template: `
<div>
<h3>{{ post.title }}</h3>
<p> #####: {{ post.content }} </p>
</div>
浏览 36提问于2020-07-12得票数 0
回答已采纳
1回答
我正在学习Vue.js(2.6.*)。他们提到了动态指令参数。根据医生的说法，下面的代码应该有效-
<a v-bind:[attributeName]="url"> ... </a>
如果我有一个名为
attributeName
在我的例子中。但下面的代码显示错误-
var app = new Vue({
el: "#app",
data: {
message: "Hello World",
argValue: "This is a simple text",
dynamicArg: "
浏览 2提问于2021-08-02得票数 0
回答已采纳
1回答
嗨，朋友们，我是新来Vue的。请帮助我，我正在使用vue2，vuetify 0.17和datatable组件。我的问题是，我想从数据中提取面积和楼层列的总和。我使用map函数计算运行总数，并将其存储在total{'area‘：100，'floor':7}中。现在在页脚中，我想要显示总数。
<v-data-table
v-bind:headers="listData.columnProperty"
v-bind:items="listData.data"
v-bind:search="search"
:totals=&
浏览 12提问于2018-02-03得票数 2
3回答
我是Vue.js (和引导-vue)的初学者，我想创建选项卡(比如)。
<b-nav class="nav-tabs">
<b-nav-item v-bind:active=true v-bind:class="{ active : tab === 1 }" v-on:click="tab = 1">Link 1</b-nav-item>
<b-nav-item v-bind:class="{ active : tab === 2}" v-on:click="tab
浏览 3提问于2017-06-21得票数 3
回答已采纳
我正尝试在我的Vue模板中绑定一个自定义属性值。我该怎么做呢？
(编辑:以下代码实际正确绑定。第三方库(Foundation)正在干扰绑定。把这个问题留给别人，因为它可能对其他人有用。
<template>
<span v-bind="{ 'aria-controls': inputControlId }"></span>
<input v-bind="{ 'id': inputControlId }">
</template>
<script l
浏览 9提问于2017-06-23得票数 8
回答已采纳
我正在使用Vue.js和Laravel创建一个纸牌游戏。我想使用Vue.js将remaining_cards的值从父对象(Card.vue)传递给子对象(Footer.vue)。因此，当remaining cards的值被更新时，即使是出现在页脚中的值也会这样做。 Card.vue： <template>
<div>
<app-header></app-header>
<div class="row justify-content-center align-items-center mt-4
浏览 15提问于2020-04-22得票数 0
回答已采纳
我对Vue.js非常陌生，在过去的几周里一直在工作中使用它。我被要求对现有代码做一个小的更新，但无法使v-bind:类正常工作。在我的简化示例中，如果单击一个按钮，其他类应该变得不那么突出，即
如果“”单击了类“”中的“声音”或“形状”，则为“”，如果“形状”单击了类中的“颜色”或“声音”，则在不透明度中单击“”，如果“声音”单击任何具有类“颜色”或“形状减少”的类，则为“”。
当然，在我的示例中，不应该同时选择两个按钮，在前面选择'Colour‘之后选择'Shape’应该会取消类'shape‘的不透明度，并添加到必要的类中。
但到底发生了什么只有“声音”按钮才能正常工
浏览 3提问于2020-07-14得票数 1
回答已采纳
1回答
我的工作是一个系统，将允许一个航运站管理订单。我有初步的改变和许多功能的工作。但是，我无法获得一个组件来更新另一个组件，即使我可以确认数据正在更新。
现在放一些代码到
./store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
greenboard :{
station: 1,
incomplete_orders:[],
complete_orde
浏览 2提问于2020-12-02得票数 0
回答已采纳
1回答
传球道具Vue js
、、、
我正在尝试将一个prop从主Vue实例传递到一个组件。我传递了两个属性，第一个起作用了，但第二个由于某种原因不起作用。
主实例
var app7 = new Vue({
el: '#app-7',
template: `<div class="b">
<div>
<button class="c" v-on:click="previousDay">‹</butt
浏览 1提问于2017-12-15得票数 0
2回答
我试过几种方法来做这件事，但似乎行不通。未定义返回activeClass。带有普通JS的classList也返回Vue中未定义的内容。似乎无法在所提供的文档中确定这一点。
这是我拿来的锅炉板。
let attributes = {
activeClass: 'tab--active'
}
Vue.component('insurance-menu', {
template: `
<ul id="tabs">
<li><a cla
浏览 0提问于2016-10-27得票数 0
回答已采纳
2回答
我的自定义组件在这里做错了什么？
我想要的是：
标签
输入
为什么idfor是未定义的？为什么在labeltext上会出现这个错误？
无效表达式：“超级英雄的名字”中的意外标识符
labeltext应该是一个字符串，我应该能够传递任何我喜欢的字符串？
这就是我到目前为止所拥有的。
Vue.component("base-input", {
props: {
value: {
type: String,
required: true
},
idfor: {
type: String,
浏览 0提问于2018-08-10得票数 7
回答已采纳
我对Vuejs很陌生，当我尝试做汉堡包菜单功能时，我发现了这个问题。
为了简化，我在下面添加了代码旋转
App.vue
<keep-alive>
<div class="body-wrapper" v-bind:class="menuOpenCls">
<div class="hamburger-wrapper" v-on:click="mobileMenu()">
<div class="hamburger-m
浏览 0提问于2018-09-27得票数 0
回答已采纳
2回答
如果我像这样设置Vue.data数组，我将在Vue控制台日志面板数组中得到像这样的[0: Object, 1: undefined 2: Object];，并且在'v-for="cell in row.cells"'中迭代之后，我得到了任何未定义属性的问题。
我这样解决了我的问题：
v-for="cell in row.cells" v-bind:colspan="cell.colspan" v-if="typeof cell !== 'undefined'"
v-for="cell
浏览 1提问于2019-05-03得票数 0
我尝试在应用程序启动时立即在Http请求之后有条件地在VueJS中呈现一个组件。如果响应正常，我希望呈现组件1，否则呈现组件2。我还希望呈现组件onClick App.vue <template>
<div id="app">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="navbar-collapse" id="navbarsExample05">
浏览 11提问于2020-05-03得票数 0
回答已采纳
我试图嵌套这些单个文件组件，并且只显示行。我没有正确理解这一点吗？
<template>
<div>
<row>
<column>
<numberModule>
</column>
</row>
</div>
</template>
<script>
import row from '../../containers/row.vue&
浏览 3提问于2018-07-24得票数 1
我是Vue和Laravel的新手。这是我的父元素，我从数据库中获得了一些可以正常工作的项目。然后将其绑定到子组件。
<template>
<div class="todoListContainer">
<div class="heading">
<h2 id="title">Todo List</h2>
<AddItemForm></AddItemForm>
</div>
<ListView
浏览 2提问于2022-08-30得票数 -1
回答已采纳
我在文件app.vue中有以下代码：
<template>
<div id="app">
<button v-on:click="component = 'login'">aa</button>
<component v-bind:is="component"></component>
</div>
</template>
<script>
import acceuil from './compo
浏览 0提问于2018-11-20得票数 0
1回答
我有一个非常简单的Vue应用程序：
<div id="app">
<item v-for="item in items" v-bind:title="item.title" v-bind:price="item.price"
@added="updateTotal(item)"></item>
<total v-bind:total="total"></total>
</div>
和一个Vue实例：
浏览 2提问于2017-04-20得票数 0
回答已采纳
1回答
在vue 1中，我正在做这件事：v-bind:class='{"isdanger": invalidLogin}'。
现在我正尝试在一个Vue 2应用程序中做同样的事情，但是我得到了这个错误：
template syntax error - invalid expression: v-bind:class="{'isdanger': invalidLogin}"
我用的是pug，以防万一。
有什么想法吗？
浏览 8提问于2016-09-08得票数 5
回答已采纳
2回答
我在试着把我的笔记按类别排序。我在一个类别中有多个注释，因此v-for在列表中返回指定的便笺类别倍数。
我知道我应该使用一个计算属性来过滤列表，但是我已经尝试了下面的一个，sortedCategories，并且似乎无法让它工作。
也许也是相关的，我现在使用Vue2过滤器按字母顺序对列表进行排序。在没有重复的情况下使列表工作后，下一步是能够单击类别并拉出该特定类别中的所有注释。
我的代码是：
<template>
<div class="notebook">
<nav class="navbar" role="na
浏览 3提问于2020-06-20得票数 2
回答已采纳
1回答
我在这里对我的问题做了一个编码，
我有一个根Vue实例，它维护组件VideoPlayer的道具。我的根实例有一个名为setVideo的方法，它现在只是分配一些虚拟值。
下面是我在根实例的数据中使用的对象：
video: {
drive: '',
filename: '',
mediaType: '',
},
下面是setVideo函数：
setVideo: function() {
// Get the drive, filename, and mediaType
this.video.drive = &#
浏览 0提问于2019-04-17得票数 0
回答已采纳
我在我的vue单文件组件中收到以下错误： Errors compiling template:
invalid expression: Unexpected token { in
{{ jobs[0].build_link }}
Raw expression: v-bind:href="{{ jobs[0].build_link }}" 完整的代码行是： <td :style=tdStyle><a v-bind:href="{{ jobs[0].build_link }}">{{ jobs[0].build_
浏览 221提问于2019-06-15得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
