laravel - Vue-laravel 中的动态 CSS 有问题
问题描述
这是我的按钮和contactList1所在的模板:-
<template>
<div class="chat-app">
<button v-on:click="displayList1()">Contacts List 1</button> //Button
<Conversation :contact="selectedContact" :messages="messages" @new="saveNewMessage" v-bind:class="{conversation:conversation}" />
<ContactsList :contacts="contacts" @selected="startConversationWith" v-bind:class="{contactsList1:contactsList1}"/> //contactsList
</div>
</template>
该对象默认设置为 false
data() {
return {
contactsList1: {
default: false,
},
},
方法:-
displayList1()
{
this.contactsList1 = false;
},
风格:-
<style lang="scss" scoped>
.chat-app {
display: flex;
}
.contactsList1 {
background-color: black;
}
</style>
即使在应用了作为false
css 的对象之后,谁能告诉我出了什么问题。我只是一个初学者,请帮助。
解决方案
您的数据函数正在返回对象contactsList1并且检查数据类型的完整路径是this.contactsList1.default
您还应该以不同的方式命名变量。
所以这是一个关于如何将布尔数据类型绑定到组件类的基本示例:
new Vue({
el: "#app",
data() {
return {
firstClass: {
status: false
}
}
},
methods: {
changeColour() {
this.firstClass.status = true
}
}
})
.styleFirstClass {
background: red
}
.itemBox {
padding:30px;
margin:30px;
border: 1px solid #444;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<button @click="changeColour()">Click to bind class</button>
<div class="itemBox" :class="{styleFirstClass: firstClass.status}">
This is some text
</div>
</div>
推荐阅读
- java - 我可以用 ant 遮蔽插件吗(最好使用 maven-shade-plugin)?
- java - 添加新节点时使用堆栈存储trap节点。为什么我会收到 EmptyStackException?
- r - 从日期时间 r 解析时分秒
- python - 如何从具有另一个环境的另一个脚本运行具有其环境的 python 脚本?
- r - 带有两个参数 if 语句的 R 函数
- android - 当谷歌地图移回当前位置时,我无法向上/向下/向左或向右移动/滚动谷歌地图
- spring - 调用@CacheEvict 注解
- java - 链接到 docker 容器随机导致 TimeOut 异常
- mysql - 如何检索由逗号分隔的字段中的 MAX 数和变量
- typescript - Cloud Functions-TypeScript-“对象可能是‘未定义’.ts(2532)”