如何使用v-bind将类切换到VueJs中的此项目
在Vue.js中，可以使用v-bind指令将类切换到项目中。v-bind指令用于动态地绑定HTML元素的属性或者组件的props。
要将类切换到Vue.js项目中，可以按照以下步骤进行操作：
- 在Vue实例中定义一个数据属性，用于控制类的切换。例如，可以定义一个名为
isActive的数据属性，并将其初始值设置为false。
data() {
return {
isActive: false
}
}- 在HTML模板中，使用v-bind指令将类与数据属性绑定。可以通过在类名前加上
:class或者:class的简写形式来实现。
<div :class="{ active: isActive }">...</div>上述代码中，active是要切换的类名，isActive是控制类切换的数据属性。
- 在需要切换类的时候，可以通过修改数据属性的值来实现。例如，可以在点击事件中切换类。
<button @click="isActive = !isActive">切换类</button>上述代码中，点击按钮时，会将isActive的值取反，从而切换类的状态。
综上所述，通过使用v-bind指令和数据属性，可以实现在Vue.js项目中切换类的功能。
推荐的腾讯云相关产品：腾讯云云服务器（CVM）
- 产品介绍链接地址：https://cloud.tencent.com/product/cvm
相关·内容
1回答
试图理解web (VueJS)中的样式是如何工作的，我正在为一些事情而奋斗：
我正在展示(动态的)一些下拉式(彩色)，充满下拉项目。
我想改变那些下拉项目的背景色。不能真正理解风格是如何运作的。
我的(合乎逻辑的)想法是从父下拉列表继承？
下拉式代码：
<b-dropdown variant="danger" size="sm" v-for="item in rubriquesFullyLoaded" :key="item.id" v-bind:text="item.libelle" id="ddo
浏览 1提问于2018-11-30得票数 0
回答已采纳
2回答
所以我正在使用一个名为的Vue2组件框架，并且我遇到了一个关于输入文本框的类的问题。
因此，在textbox组件中，代码是：
<template lang="pug">
div(
class="input-group"
v-bind:class="classes"
)
label(
v-bind:for="id"
v-html="label"
)
input(
v-bind:id="id"
v
浏览 2提问于2017-02-15得票数 0
1回答
我使用VueJS在“砖石”布局中呈现具有可变高度的动态组件，但是当高度不能完美地排列时，这通常会产生难看的空间。我本来希望使用一个库来处理这个问题，但不幸的是，选项卡组件的宽度也是可变的，这意味着它们都不能正常工作。
我有：
Vue 2.5
(锁定，无法升级到4)
示例代码()：
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<script
浏览 0提问于2018-07-07得票数 1
回答已采纳
我正在构建一个任务应用程序，它为不同的任务类型提供了几个不同的模板。任务按用户定义的类别进行分组。
我简单地使用了一个
v-for="category in categories"
为了构建我的任务容器，然后在任务容器中，我有一些模板，这取决于任务的类型：
<task v-if="task.type == 0" v-bind:task="task" ></task>
<item v-if="task.type == 1" v-bind:task-"task"></item&
浏览 0提问于2015-11-18得票数 1
2回答
我将类似的内容放在JSF facelets中：
<html xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html">
<f:view>
<h:head></h:head>
<h:body>
<todo-item
浏览 0提问于2018-01-18得票数 2
回答已采纳
2回答
我有一个输入包装器组件，它有一个Select，并显示一个自由形式的文本框，用户可以在其中输入确切的金额。 我不知道如何将自由格式文本框绑定到父字段以及用户选择的选项。我不确定如何发出更改/输入。 尝试从Custom Events docs跟踪此内容 这里有一个简单的例子： ? InputWrapper： <template v-if="inputType === 'text'">
<input type="text" v-bind:value="value" v-bind="$attrs&#
浏览 16提问于2020-02-01得票数 2
回答已采纳
1回答
现在，我们面临着选择JavaScript框架(VueJS)的问题。在我们自己的内部项目Dilly-Dally中，我们面临着输出更大的JSON对象的问题。(近似。15000行json)
我们的计划是将这些数据放在一个表格中，但是看起来VueJS在快速显示如此多的信息方面有点吃力。
我们尝试用普通的文本字段替换输入字段，看看这是否提高了性能，我们也尝试了分页，但也没有解决我们的问题。
因为现在我们有大约20秒的加载时间，当你的浏览器满负荷的时候。
所以现在亲爱的堆栈溢出，我们转向你！你有什么想法来改善加载时间吗？
下面是我们如何制作表格的一个片段。
<b-table striped hove
浏览 1提问于2020-03-17得票数 0
1回答
所以我看到了很多关于这个问题的帖子，但我不明白为什么我在这里做错了。我有一个放在组件中的表单。它主要由使用vuetify的TextFields组成。然后我会在其他地方重用这个表单。我尝试了不同的方法，但我仍然得到错误，这是我的组件。 <v-window continuous v-model="step">
<v-window-item :value="1">
<v-form>
<v-co
浏览 16提问于2021-03-21得票数 4
回答已采纳
1回答
我有一个组件，它将有许多div元素，其中只有一个在单击时有一个'active‘类。如果变量'activeSlide‘等于元素，我会尝试绑定'active’类。
v-bind:class="{ 'active': activeSlide === ?? }"
我只是不确定??应该是什么。我还没能找到任何能说明元素如何引用自身的东西。或者也许有更好的方法？
我在.vue组件文件中的代码：
<template>
<div v-on:click="show" v-bind:class="{ 'a
浏览 7提问于2019-11-28得票数 0
2回答
很简单的问题。我正在学习VueJS，并且创建了一个简单的组件： Vue.component('blog-post', {
props: ['title'],
template: '<h3>{{ title }}</h3>'
}) 然后我解析了一些数据，如下所示： new Vue({
el: '#blog-post-demo',
data: {
posts: [
{ id: 1, title: 'My journey with
浏览 26提问于2020-10-14得票数 0
2回答
我知道我可以用v-bind动态地为属性设置一个值，但是我希望动态地添加属性，而不是这个值。类似的内容(虽然这是无效的)：
<a
:href="url"
{{ downloadable ? 'download' : null }}
class="link"
@click="onClick">
{{ text }}
</a>
注意:我没有使用JSX
我正在考虑使用$attrs ()，但它是只读的。
有办法在Vue身上这样做吗？
解决方案
浏览 0提问于2018-08-16得票数 1
回答已采纳
1回答
我想知道如何迭代组件名称列表(来自对API服务器的AJAX调用)，并将它们呈现为组件，并将相关属性传递给每个组件(即动态绑定它们的属性)。
到目前为止，我已经设法迭代了表示组件的JSON项目列表，并成功地呈现了这些组件。我现在要做的是使用v-bind绑定每个组件的属性。
在下面的示例中，item-one组件将接收带有item1.jpg值的image属性；而item-two组件将不接收任何属性。
<template>
<div v-for="item in items">
<component :is="Object.keys(i
浏览 4提问于2017-05-12得票数 7
回答已采纳
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
回答已采纳
我正在使用VueJs在项目中，当页面加载单选按钮状态应该检查状态需要，之后在更改单选按钮，下面的div应该是隐藏和显示。我写了下面的代码，但它不工作：
html
----
<div id="demo">
<input type="radio" value="male" v-model="male" v-bind:checked="checked" />
<input type="radio" value="male" v-model="
浏览 4提问于2017-05-24得票数 15
1回答
我试着用v- bind绑定更多的类:类我有单选按钮，在激活时，我想从引导程序中给出一些类。我知道我不会把课程做得很好。
<div id="app">
<div class="btn-group" data-toggle="buttons">
<label :class="{'btn', 'btn-warning', 'active: radio === 1'}">
浏览 2提问于2017-08-14得票数 0
回答已采纳
1回答
也许这是一个简单的问题，但我找不到正确的方法来创建基本的包装器组件。例如，我有一个这样的select：
<select v-model="foo" name="bar" v-validate="'required'" v-bind:class="{ invalid: errors.has('bar') }">
<option value="">Default</option>
<option value="1"
浏览 6提问于2017-12-12得票数 0
回答已采纳
1回答
条件模板逻辑Vuejs
、、、
<template>
<div>
<div v-if="context=='home'" v-for="item in filteredItems" @mouseover="activate" @mouseout="deactivate" @click="openlink" class="item" :data-link="item.link" v-bind:class="item.class"
浏览 1提问于2017-03-30得票数 0
回答已采纳
1回答
在我的laravel + Spark + Vue js项目中，我使用了，它们的代码如下
export default {
props:{
cropBtn: {
type: Object,
default: function() {
return {
ok: '保存',
cancel: '取消',
}
}
}
}
根据他们的文档，如果您想要更改按钮文本，请执行以下操作
cropBtn对象{ok：“保存”，“取消”：“放弃”}裁剪按钮的文本
我用过
<vue-core
浏览 2提问于2017-02-07得票数 1
回答已采纳
1回答
VueJS遍历对象中的数组吗？
、、、、
如何遍历对象中的数组？我希望实现的是
这是我的代码，非常简单，它当前以正确的顺序输出索引，但我想要的是数组的值！
<template>
<div>
<form class="production">
<div v-for="(id, index) in ids" :key="index" class="form-group">
<label class="control-label" v-bind:for="ids
浏览 0提问于2020-05-06得票数 0
我正在尝试为预算跟踪创建一个vue应用程序，并且我有一个想要在/budget路由中呈现的BudgetItems组件。所有其他组件和原始HTML都会呈现，但这一个组件不会 这是BudgetItems组件： <template>
<div>
<BudgetItem v-for="item in Items" v-bind:key='item.id' v-bind:Item="item" />
</div>
</template>
<s
浏览 20提问于2020-08-26得票数 0
我是VueJS的新手，我想在我的Symfony平台上使用它。我想知道如何在小枝变量中添加一个VueJs变量。
以下是我的例子：
<div v-for="competition in Vcompetitions">
<div class="thumbnail">
<a v-bind:href="XXX">
<img v-bind:src="competition.src">
</a>
</div>
浏览 5提问于2017-07-20得票数 3
回答已采纳
1回答
我实际上是想同时显示卡片，我使用v-for来获取内容。
这是我的代码：
<div v-for="info in infos" v-bind:key="info.id">
<div class="vx-col w-full md:w-1/2 mb-base">
<vx-card>
...
My contents goes here
...
</vx-card>
浏览 1提问于2021-01-13得票数 1
回答已采纳
1回答
vueJS列表转换未激活
、、、
我在Vue JS应用程序中有一个场景，其中我有一个项目列表，这些项目在用户按下按钮后随机更改顺序。我可以使用Vue.set让列表元素动态地改变它们的位置，但是当我通过<transition-group>标记添加一个列表转换时，变化仍然是，嗯，转换较少，我不知道为什么。 我使用v-for属性显示我的项目列表，如下所示： <transition-group name="shuffle" tag="ul">
<li class="content column" v-for="card in notecar
浏览 16提问于2020-03-13得票数 3
回答已采纳
我试图在VueJS中循环一个嵌套的对象数组。我使用<script type="x-template" id="article-content"> </script>来呈现我的
我尝试过循环遍历附加一个v-for的组件，但是仍然没有任何东西给我返回数据。这种方法适用于其他组件，但似乎不适用于这个特定的领域。
组件模板
<script type="text/x-template" id="article-content">
<article class="content__ar
浏览 0提问于2019-08-30得票数 0
4回答
我有一个表，它在每个单元格中的只读输入框中动态地呈现数据。在第一个单元格中，有一个编辑按钮。当用户单击“编辑”时，应禁用输入框上的只读，以便在每个单元格中输入数据。编辑按钮应该隐藏，保存按钮应该显示。当用户单击“保存”时，它应该调用一个可以使用数据的方法(保存到数据库或其他东西)。
我想我可以利用这个事件并深入到目标，但是它是一个数组，我不知道该做什么。有什么想法吗？
<div id="app">
<table border=1 width=100%>
<tr>
<td width=10px>EDIT</td&g
浏览 8提问于2019-10-27得票数 2
回答已采纳
4回答
我只想知道是否可以通过vue的关键属性找到DOM元素？我目前正在处理一份名单。我把它通过via指令显示在div上。我将键绑定到元素的索引中。
v-for="(apk, index) in project.apks" v-bind:key="index"
当这些元素从我的服务器获取并显示出来时，如果我能够为它们计算一些内容，这将对我非常有帮助。它只是解析一个文件并查找关键字，并相应地为项目选择一个css类。
问题是，当这些元素被添加到DOM时，我不知道如何为它们调用一个方法。它们是很多html事件，但我找不到一个表示插入dom :(
浏览 0提问于2018-03-13得票数 13
回答已采纳
如何使用此JSON创建simpel HTML表： [
[
"",
"Current",
"New",
"AB",
"DEF",
"GHI",
"JL"
],
[
"Foobar",
"Aa ",
"234",
"44",
"aax",
浏览 15提问于2020-10-29得票数 0
回答已采纳
2回答
这是我的代码:每当数据被更新时，我都想在HelloWorld组件上创建一个转换。过渡本身运作良好。
<transition name="fade">
<p v-if="awesome">Vue is awesome</p>
</transition>
下面是我的“卡片”，它们是动态创建的。
<v-row no-gutters>
<v-col cols="12" sm="4" md="4" v-for="(todo,
浏览 1提问于2019-12-08得票数 6
回答已采纳
2回答
我正在尝试创建一个组件库的可视化表示。我使用动态<component>来呈现每个组件。然而，当我用它的插槽填充组件时，由于缺少父方法，我遇到了问题。
我希望组件是可用的(演示)，因此我需要补偿this.$parent不工作。
<template>
<component v-bind:is="'s-' + comp.name" v-bind="props" ref="comp"> <!-- this is the corrent parent-->
<div v-i
浏览 1提问于2020-03-05得票数 1
我想这可能是个错误，但找不到问题。我有这个Vuejs模板，如果我删除v验证的话，这个模板就会呈现得很好。然而，当我使用它时，它根本不会渲染任何东西。已经将调试器放回true，并返回false，而逻辑测试只返回true一次，正如预期的那样。有人能发现我做错了什么吗？
template: `
<div class="workbench container">
<ul class="collapsible popout" data-collapsible="expandable">
<collaps
浏览 0提问于2017-11-27得票数 3
我对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
回答已采纳
1回答
我正在寻找的是，当我选择一个项目，我希望选项被禁用在下拉列表。下面的代码与我预期的一样工作，但是禁用文本的颜色太浅了。我想让它更暗，甚至使用一个引导颜色类(主要，次要)。
是否有一种方法可以更改vuejs代码中禁用文本的颜色，还是在CSS中进行了更改？
HTML/vuejs:
<option v-for="chores in chores.Data" :key="chores.ChoreId" v-bind:value="chores.ChoreId" :disabled="dailyChoreCheck(chores.ChoreI
浏览 3提问于2018-09-05得票数 0
回答已采纳
我一直试图获得一个动态组件来工作，这将使我能够根据提供的模板单独呈现列表项。
然而，Vue似乎是在父作用域中而不是在dynamicComponent作用域中内插模板。
简单的例子：
<dynamicComponent
v-for="item in listItems"
v-bind:input="item"
v-bind:is="{template:'<p>{{input.name}}</p>'}"
</dynamicComponent>
这是失败的，因为在父
浏览 2提问于2018-01-21得票数 2
我有一个vue组件，需要一些数据。我很容易地在php中创建json数据并将其传递给组件。但是我想在javascript中定义一个对象，并将它发送到vue组件。下面是我的.blade.php文件，它正确地传递了php变量。在脚本部分，我定义了javascript对象js_table_definition。该对象不希望转到组件。
<?php
$table_definition = (object) [
"name" => "vendors",
"access" => "read",
"
浏览 3提问于2017-01-18得票数 3
1回答
在vuejs中，我正在开发两个用户之间的对话聊天。我有这样的嵌套组件
Chat
->ChatLog
-> ChatMessage
->ChatComposer
chat组件具有chat的结构(引导中的一个面板)，这也是我使用Axios在加载页面时从数据库中检索的所有消息的位置。
axios
.get('/conversation/'+this.conversation.id+'/message')
.then((response) => {
this.messages = response.data
浏览 3提问于2017-05-30得票数 0
回答已采纳
1回答
我有一个vue组件：
<transition-group name="list">
<task v-for="task in tasks" v-bind:key="task.id" v-bind:task="task" class="list-task"></task>
</transition-group>
通过一个简单的过渡：
.list-task {
transition: all 0.5s;
}
当我用tasks向unshift数组中添加一个元素时，我
浏览 0提问于2016-12-16得票数 1
回答已采纳
当我点击"add study“按钮时，我想检索数据"project.id”来记录它。当我点击这个按钮时，我发送了名称和状态，但我也想通过我的API发送项目的id。这是代码： <template>
<div>
<div v-for="(projet,index) in arrayProjects.projects" v-bind:key="index" class="box-project">
<h2>{{projet.title}} - {{pr
浏览 17提问于2021-03-22得票数 0
回答已采纳
我使用Vuejs2.0编写了一些页面。在静态模式下，我的所有组件都可以工作，我可以验证设计。因此，我尝试将这些页面的源代码与Thymeleaf集成到项目中，但有些渲染还没有完成。
下面是代码的用例：
<selectpicker id="selectReg" title="Sélectionnez des régions"
data-width="100%" v-bind:multiple="true"
v-on:selected="selectRegion
浏览 0提问于2016-12-03得票数 1
回答已采纳
1回答
我试图通过axios将登录用户的任务放到vuejs组件中，但我一直在获取
发布 401 (未经授权)
以下是从api.php出发的路线：
Route::group(['middleware' => 'auth:api'], function() {
Route::prefix('tasks')->group(function() {
Route::post('/', 'TasksController@index');
Route::post('{
浏览 0提问于2020-03-18得票数 0
我有一个相当简单的组件。基本上，它是一个下拉select，我需要运行一些自定义代码，它位于外部javascript函数中。但是，这个支柱并不是组件的每个实例都需要的。所以有时候道具里可能什么都没有。其他时候，它可能做一件事，其他人可能做别的事情。
<template id="drop-list-template">
<select class="form-control"
v-model="value"
v-bind:class="{ required: isRequired,
浏览 1提问于2018-05-11得票数 0
回答已采纳
2回答
我已经尝试了几个小时，以便能够在Vue JS中添加/删除两个类。
文档示例仅显示如何切换其中一个。
我有一个按钮，单击该按钮可以将类更改为：active toggle-on或toggle-off
我可以断断续续地做“活动”，但是我似乎不能添加/删除第二个类。
该按钮如下所示：
<button v-on:click="toggleOnTop" id="toggleTopButton" v-bind:class="toggleActive"></button>
和我的数据：
data: () => ({
toggle
浏览 15提问于2017-06-18得票数 2
回答已采纳
我对VueJS很陌生。我正在与VueCLI3 & VuetifyJS合作一个新项目。
我正在尝试基于VuetifyJS组件创建一个可重用的组件，并且希望通过在一个单独的文件中传递多个道具来同时在我的新组件文件中呈现它们，从而使事情变得更简单。我发现这篇文章解释了实现这一目标的技术。
每次我需要呈现它们时，我都必须导入我的独立文件。
component1.vue
<template>
<v-btn v-bind='buttonProps'>
Button 1
</v-btn>
</template>
&l
浏览 2提问于2018-08-24得票数 0
回答已采纳
这周，我开始学习VueJS，并试图开发一个便笺应用程序，但我遇到了一些问题：
<div id="app">
<h2>NOTES : </h2>
<ol>
<notelist v-for="n in notes" v-bind:note="n" v-bind:key="n.id">
</notelist>
</ol>
<hr>
浏览 0提问于2019-09-03得票数 1
回答已采纳
1回答
在我的vue模板中
<img class="workimg" v-bind:src="item.imagemobile">
我想试着把它附加到
<img class="workimg" v-bind:src="/featured/item.imagemobile">
语法破坏了应用程序，这有可能吗？
浏览 2提问于2017-03-30得票数 0
回答已采纳
3回答
如何使用VueJs在视图中渲染javascript图像对象。我在下面添加了一个示例代码。但是"v-html“标签并没有渲染图像。
<div id="test">
<span v-html="imageTemp"></span>
</div>
<script>
new Vue({
el: "#test",
data: {
imageTemp: new Image()
},
m
浏览 10提问于2017-11-29得票数 1
1回答
有一个Vuejs代码，我想在本地运行()
当我试图在本地运行它时，我得到的结果与代码页不同。
vs
我在本地的代码：
script.js
const app = Vue.createApp({
data() {
return {
currentTab: 'Home',
tabs: ['Home', 'Posts', 'Archive']
}
},
computed: {
currentTabComponent() {
return 'tab
浏览 1提问于2020-12-16得票数 0
回答已采纳
我对Vuejs非常陌生，所以如果这是很普通的事情，请原谅。但是，我试图根据项目的名称是否等于另一个对象的条件来设置项目的样式。
<template>
<div id="subMenuWrapper">
<ul id="subMenuList">
<li v-for="menu in SubMenuItems" v-bind:class="{activeSubMenuItem === menu.name? activeSubMenuItemStyle:subMenuItemS
浏览 0提问于2017-02-20得票数 4
回答已采纳
2回答
<tr v-for="(i, index) in streams">
<td class="text-center">{{index + 1}}</td>
<td class="text-center">{{i.title}}</td>
<td class="text-center"><
浏览 2提问于2018-10-04得票数 1
回答已采纳
我正在努力完成动态链接到锚点的功能，但是名称将来自v-模型。我使用vuejs2.5，我想绑定名称v- bind :href来指向指定的信息，所以如果有大量的信息，它基本上会跳到它。我需要动态地这样做，因为在现实中它将是大量的数据。如果目标来自v型，有人能恰当地告诉我如何跳到它吗？不确定#会去哪里，或者它是否仍然需要。
new Vue({
el: "#app",
data: {
name:'Girl',
Modules:['one','two','three','four']
浏览 2提问于2022-08-29得票数 0
回答已采纳
1回答
我正在为我的数据做排序和筛选。我有一些API的卡片。对于排序，我有很少的问题(按价格排序，按时间排序，等等)。默认的排序是按价格排序，它已启用。
过滤器是应该显示/隐藏我的卡片的输入(例如:最低价格和最高价格的范围)。
我已经完成了筛选，但是当我尝试按时间对项目排序时，筛选器的v显示逻辑从以前的排序中保存下来(按价格排序)
卡来自挂载() axios响应
Result.vue
用于排序的按钮
<div class="sort-btn down" v-bind:class="{ activesort: activesort }"
v-on:clic
浏览 2提问于2018-08-10得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
