debugging 如何修复“无效表达式:v-bind:style中缺少”错误?

mwkjh3gx  于 2022-11-14  发布在  其他
关注(0)|答案(1)|浏览(263)

我尝试向以下元素添加一个v-bind:style,但出现此错误:

[Vue warn]: Error compiling template:

invalid expression: missing : after property id in

    {background-color: bg_color, color: txt_color}

  Raw expression: v-bind:style="{background-color: bg_color, color: txt_color}"

1  |  <div v-bind:style="{background-color: bg_color, color: txt_color}" id="app">
   |       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
2  |  
3  |              <header>

(found in <Root>)

这是我的密码

var vueinst = new Vue({
    el:'#app',
    data: {
        dark_mode: false,
        bg_color: '#FFFFFF',
        txt_color: '#333533'
    },
    computed: {
        change_mode: function(){
            if(this.dark_mode == true){
                this.bg_color = '#333533';
                this.txt_color = '#F5CB5C';
            }
        }
    }
});

我的问题是我如何修复这个错误?任何帮助都将不胜感激!

kqlmhetl

kqlmhetl1#

我认为如果您在***background-color***周围添加单引号,将解决vue.js文档中所述的错误
v-bind:style的Object语法非常简单--它看起来几乎像CSS,只是它是一个JavaScript对象。你可以使用camelCase或kebab-case作为CSS属性名称:

camelCase(键前后不需要引号):

<div :style="{ backgroundColor: bgColor, color: txtColor}" />

kebab-case(需要在键周围加引号):

<div :style="{ 'background-color': bgColor, color: txtColor}" />

这是一个非常简单的语法,它是一个非常漂亮的语法,它是一个非常简单的语法,它是一个非常漂亮的语法,它是一个非常简单的语法,它是一个非常漂亮的语法,它是一个非常简单的语法,它是一个非常简单的语法,它是一个非常简单的语法,它是一个非常简单的语法,它是一个非常简单的语法,它是一个非常简单的语法,它是一个非常简单的语法,它是一个非常简单的语法,它是一个非常简单的语法,它是一个非常简单的语法,它是一个非常简单的语法,它是一个非常简单的语法,它是一个非常简单的语法,它是一个非常简单的语法,它是一个非常简单的语法,它是一个非常简单的语法,它
v-bind:style的Object语法非常简单--它看起来几乎像CSS,只是它是一个JavaScript对象。你可以使用camelCase或kebab-case作为CSS属性名称:我知道它的旧版本,但这仍然适用。
(我附上旧的链接,因为vue.js的ne指南没有这些确切的话)

相关问题