程序员经验分享-hwhale

v-bind:style 语法在内联样式中不起作用

2024-04-13

我对 Vue 和整个系统都很了解v-bind事情让我陷入困境......

基本上，我正在尝试实现这种语法，但是使用 Vue 的v-bind，因为我不能在内联 CSS 样式中使用变量：

<div class="card" style="background-color: {{school.color}}">

这是我的 Vue 语法，我是从他们的文档中遵循的，但它仍然抛出错误，我不明白为什么？显然，它必须是简单的东西，我只是还没有完全理解 Vue 的复杂性！

<div class="card" :style="{ background-color: school.color }">

任何帮助将非常感激！


For 对象语法绑定 https://v2.vuejs.org/v2/guide/class-and-style.html#Object-Syntax-1您正在绑定一个object。因此，密钥必须有效，并且需要用引号引起来，除非它们是有效的不带引号的键 https://stackoverflow.com/questions/9367572/rules-for-unquoted-javascript-object-literal-keys。破折号-不允许出现在不带引号的键中，因此无法编译。

这些选项中的任何一个都可以工作：

<div class="card" :style="{ 'background-color': school.color }">

or

<div class="card" :style="{ backgroundColor: school.color }">
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

vuejs

inlinestyles

v-bind:style 语法在内联样式中不起作用 的相关文章

  • Vue Test Utils 中的“存根子组件”是什么？

    Vue 测试工具 https vue test utils vuejs org有一个名为的 API 方法shallowMount https vue test utils vuejs org api shallowmount that 创建

  • 在 Vue Nuxt 中监视并重新加载 api 文件夹

    如何让 nuxt 监视 非标准 目录并重新编译 重新加载自身 更具体地说是针对具有附加服务器 API 的目录 我有我的 Express api api 因为我引用了目录serverMiddleware使用 api 我希望当我对该目录中的文件

  • 如何使用 VueJS 将 API 中的数据存储在 localStorage 中

    我使用 VueJS 练习简单的 SPA 要求我监听 API 并将其一些数据保存在浏览器的 localStorage 中 但是我对 VueJS 仍然不是很有经验 所以我不知道如何获取特定数据并保存将其发送给 LS 以便登录用户稍后可以看到他们

  • 以编程方式将焦点设置在 Vuetify 中的按钮上

    我试图在每次打开 v 对话框时将操作按钮集中在 v 对话框中 我尝试使用自动对焦 但它只能工作一次 通常在 Vuetify 中 您可以通过添加引用然后调用 focus 函数来将焦点设置在元素上 如下所示

  • 如何在VueJS中将所有事件传递给父级

    传递道具 In VueJS如果你设置inheritAttrs to false并使用v bind attrs 您将组件中未声明的所有 props 传递给其子组件 是否有类似的方法将来自子级的所有事件传递给其父级VueJS 代码示例 Wrap

  • 在Vue.js中，如何选择组件的节点元素？ $refs 可能吗？

    因为我想选择组件的节点元素 所以我想也许我可以使用 refs Parent

  • 我需要从带有数据页的页面在组件中运行函数

    我有一个用于绘制图形或树的组件 并且我在页面中使用此组件 我的 axios 在页面上并提供数据 我需要将数据传递给组件的函数 然后从页面数据中绘制我的树 My Page

  • Vue Cli 3 禁用代码分割 - 无法删除哈希文件

    我有一个vue config js设置效果很好 并取消了默认的代码分割 但它仍然输出一个 CSS 文件 其哈希值与具有好名称的 CSS 文件相同 我可以编写一个脚本来删除它 但我想知道是否有一种方法可以将文件设置为不输出带有哈希的CSS文件

  • 使用 Vuex 更新数组中的对象[重复]

    这个问题在这里已经有答案了 如何使用 Vuex 更新数组内的对象 我尝试了这个 但没有成功 const state categories mutations mutationType UPDATE CATEGORY state id cat

  • 在 Vue 的“选择”选项中显示来自服务器的对象列表

    我收到 grades 变量中格式正确的成绩列表 key gt value 如何使用此变量用 Vue 填充选择选项输入 我想我必须用 绑定 vue 变量 但我才刚刚开始使用 vue 我可以找到很少的基本示例

  • Vue cli 3项目，图像路径中的动态src不起作用

    我在 vue 组件中引用图像 url 例如 img alt Vue logo src statics reports logo png 这有效 但在尝试的同时 img alt Vue logo data return imgPath sta

  • 在 Vue.js 中，如何防止子路由的导航？

    好的一点是beforeRouteLeave是你可以防止在某些情况下导航离开 我有一个使用子路由来渲染页面的一部分的设置 我希望在子路线上设置一个导航守卫 以防止在未保存数据的情况下切换到另一条路线 path customers view c

  • 可以在 Vue 模板中渲染 VNode 吗？

    我遇到的情况是 我有一个渲染函数将一些数据传递到作用域槽 作为此数据的一部分 我想包含一些由渲染函数构造的 VNode 这些 VNode 可以选择由作用域插槽使用 无论如何 在模板中编写作用域槽以输出收到的原始 VNode 时是否存在 Vu

  • 从vue中的api加载路由

    我正在尝试从我的 API 在 Vue 应用程序中加载路由 我尝试将数据推送到路由变量并使用 addRoutes 方法 但没有运气 我认为异步可能存在问题 但为什么 addRoutes 不起作用 这是我的代码 import Vue from

  • 使用Vue组件渲染函数时无限循环

    我正在使用 Vue 组件来渲染一些表头 如下所示 render createElement return createElement div class header Array apply null length this initHou

  • 如何预渲染多个Vue应用页面？

    我正在尝试 未成功 在使用 Vue CLI 搭建的同一项目中预渲染多个 Vue 应用程序的 HTML 由于多种原因 我不想使用 Vue Router 或 Nuxt 等 我尝试过使用预渲染 Spa 插件 https github com ch

  • 观察数组中当前值的变化

    每当它改变半径和中心时 我想监视每个项目 每当它改变时 我想 console log 项目索引和值 let map ref null map value circles是一个数组 当我使用此监视功能时 它仅在加载时显示一次值 我希望每次它在

  • 覆盖 vuetify 中的 scss 变量

    为了增加 vuetify 的 v switch 的宽度 我想修改 vuetify 的 scss 变量的值 vuetify是通过vue cli配置的 开发的代码如下 src assets css overrides scss font siz

  • Vue 3：“defineProps”引用本地声明的变量

    为什么我收到警告错误消息 defineProps引用本地声明的变量 eslint vue valid define props 当我在 props 中使用自定义验证器时SFC

  • Vue / Typescript，获取模块“*.vue”没有导出成员

    我想导出几个接口Component from vue file 基本 vue

随机推荐

  • 有谁知道 CVS 命令行选项来获取上次签入的详细信息？

    我在 Windows 上使用 CVS 带有 WinCVS 前端 并且希望在构建失败时将上次签入的详细信息添加到我们的自动构建过程中的电子邮件中 以便更容易修复 我需要知道已更改的文件 更改它们的用户以及评论 我一直在尝试制定命令行选项 但似

  • 来自 links-own 的参数值

    我需要帮助 所以我想将代理拥有的参数指定为链接拥有的参数值的平均值 frienships own strength household own influence factor to create influence if friendsh

  • 在 Rails 资产管道的 js.coffee 文件中使用 erb 时出错

    我有以下代码 assets javascripts home js coffee erb jQuery gt addClickListeners gt document on click add chord link addChord do

  • C IEEE-Floats inf 等于 inf

    在 C 中 在使用 IEEE 754 浮点数的实现中 当我比较两个 NaN 浮点数时 它返回 0 或 false 但是为什么两个都为 inf 的浮点数会被视为相等呢 该程序打印 equal 至少在带有 gcc 的 Linux AMD64 下

  • 使用 strtotime() 在 php 中计算相对日期

    我正在寻找一种可靠的方法来返回指定工作日 例如 星期一 的完整日期current week 由于今天是 2012 年 6 月 13 日星期三 我预计以导致2012 06 11 而是 php 返回2012 06 18好像它解释了本星期作为意义

  • 核心数据：3表连接？

    我知道 Core Data 不是数据库 有很多区别 是这个吗 在数据库中 我通常会有以下内容 A gt gt B gt gt C A 有很多 B B 有很多 C 查询 给我所有具有 c attr X 的 A 很容易写成 select fro

  • 关于 string.c_str() 生命周期

    我想知道是否void func const char str 参考有效的str如果我写如下 auto str string hello c str func str 它与下面的代码有何不同 func string hello c str 在

  • 查找数据集中所有点距离最近的点 - Python

    我有一个数据集如下 Id Latitude longitude 1 25 42 55 47 2 25 39 55 47 3 24 48 54 38 4 24 51 54 54 我想找到数据集每个点的最近距离 我在互联网上找到了以下距离函数

  • BufferedWriter在java中如何工作

    我经常将文本输出到文件中 我想知道一件事 怎么办BufferedWriterwork 当我打电话时它会在文件中写入文本吗writer write text 如果不写文本 我需要使用flush函数来写数据吗 例如 File file new

  • 使用 BeautifulSoup 进行网页抓取时，我可以接受或忽略 Google 隐私声明吗？

    从控制台运行以下代码时 我无法查看 Google 新闻页面的 HTML 我看到的 HTML 是 Google 隐私声明的 HTML 以 在继续之前 开头的 HTML from bs4 import BeautifulSoup import

  • 如何将数据从服务器代码传递到ejs模板？

    我有一个简单的服务器 我可以通过浏览器完美地获取 url 上的数据 我正在尝试获取 ejs 模板中的数据 这就是我获取数据的方式 app get some function req res next var size 3 var curr

  • 使用 LINQ 使用 2 个列表创建字典

    我正在尝试从 2 个列表创建一本字典 其中一个列表包含键 一个列表包含值 我可以使用 for 循环来完成此操作 但我正在尝试查找是否有一种使用 LINQ 来完成此操作的方法 示例代码会很有帮助 谢谢 在 NET4中你可以使用内置的Zip h

  • 如何更改杰克逊的默认具体地图类型？

    我有一个非常简单的 Jackson 代码来反序列化嵌套的 JSON 对象 public class MapTest public static void main String args throws Exception final Str

  • Servlet 中的 iText PDF

    因此 我正在使用此代码从我的服务器创建一个报告 PDF 文件 response setHeader Expires 0 response setHeader Cache Control must revalidate post check

  • 当超级视图完成加载时调整子视图的大小

    我知道有无数类似的问题 要么全部导致使用灵活的高度 宽度 要么将 TranslatesAutoresizingMaskIntoConstraints 设置为 false 我使用我创建的扩展添加了一个视图 extension UIView f

  • 大师必须从纱线、火花开始

    当我想要运行 SparkPi 示例时 我收到此错误 beyhan beyhan spark 1 2 0 bin hadoop2 4 home beyhan spark 1 2 0 bin hadoop2 4 bin spark submit

  • Scala 中的十六进制字符串到 Int、Short 和 Long

    只是找不到在 Scala 中将十六进制字符串转换为数字 Int Long Short 的方法 有没有类似的东西 A toInt base 您可以使用 Java 库 val number Integer parseInt FFFF 16 gt

  • 在 iOS7 上停止 Safari 提示保存卡片数据

    我有一个客户网站 提示他们在 iOS7 下保存卡详细信息 我完全找不到任何关于如何或是什么导致 iOS 决定这是正确的事情的信息 有人有任何想法吗 我们遇到了这个问题 正如 Guy Thomas 提到的 这是因为表单中的密码字段带有抄送字段

  • 有什么方法可以格式化 Plotly for Python 漏斗图中的数字吗？

    我有一个漏斗图 其中一些值大于 9000 这些值用带 K 的点符号显示 表示末尾有千 我花了 20 分钟在 Google 和 Plotly 文档中查找 但未能找到关于如何格式化数字的明确答复 这是输入数据 这是我正在使用的代码 fig px

  • v-bind:style 语法在内联样式中不起作用

    我对 Vue 和整个系统都很了解v bind事情让我陷入困境 基本上 我正在尝试实现这种语法 但是使用 Vue 的v bind 因为我不能在内联 CSS 样式中使用变量 div class card style background col

热门标签