我尝试向以下元素添加一个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';
}
}
}
});我的问题是我如何修复这个错误？任何帮助都将不胜感激！
1条答案
按热度按时间kqlmhetl1#
我认为如果您在***background-color***周围添加单引号，将解决vue.js文档中所述的错误
v-bind：style的Object语法非常简单--它看起来几乎像CSS，只是它是一个JavaScript对象。你可以使用camelCase或kebab-case作为CSS属性名称：
camelCase（键前后不需要引号）：
kebab-case（需要在键周围加引号）：
这是一个非常简单的语法，它是一个非常漂亮的语法，它是一个非常简单的语法，它是一个非常漂亮的语法，它是一个非常简单的语法，它是一个非常漂亮的语法，它是一个非常简单的语法，它是一个非常简单的语法，它是一个非常简单的语法，它是一个非常简单的语法，它是一个非常简单的语法，它是一个非常简单的语法，它是一个非常简单的语法，它是一个非常简单的语法，它是一个非常简单的语法，它是一个非常简单的语法，它是一个非常简单的语法，它是一个非常简单的语法，它是一个非常简单的语法，它是一个非常简单的语法，它是一个非常简单的语法，它是一个非常简单的语法，它
v-bind：style的Object语法非常简单--它看起来几乎像CSS，只是它是一个JavaScript对象。你可以使用camelCase或kebab-case作为CSS属性名称：我知道它的旧版本，但这仍然适用。
（我附上旧的链接，因为vue.js的ne指南没有这些确切的话）