在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
中,如果单击元素,则调用该函数。所以每次你点击元素,元素的颜色都会改变。希望这对你有帮助。