在vue网站上，我发现了一个令人困惑的例子。在<script>中，它说
const color = ref('green')
function toggleColor() {
color.value = color.value === 'green' ? 'blue' : 'green'
}字符串
在<template>中，
<p :style="{ color }" @click="toggleColor">
This should be green, and should toggle between green and blue on click.
</p>型
我不太明白:style="{ color }"是怎么工作的，有人能帮我吗？
我在网上搜索了这个问题，似乎没有找到另一个例子。我也试过其他方法，如删除{}，但它没有工作。
2条答案
按热度按时间bf1o4zei1#
我想完整的写法应该是：style="{color：color}"。这应该受到JavaScript中对象符号的启发，其中对象中的键和值如果相同，则可以省略。
字符串
kxkpmulp2#
style和:style属性之间的区别是，style是静态的，而:style是动态的。这意味着:style的值不限于纯文本，但您可以在其中执行JavaScript操作，就像您在示例中所做的那样。将变量color的内容传递给属性，而不是单词“color”。函数function toggleColor()正是这样做的，它切换变量color的值。而在@click="toggleColor中，如果单击元素，则调用该函数。所以每次你点击元素，元素的颜色都会改变。希望这对你有帮助。