样式绑定使应用程序不再出现在 Vue 中答案

【问题标题】：Style Binding makes app no show up anymore in Vue样式绑定使应用程序不再出现在 Vue 中
【发布时间】：2020-04-16 04:49:37
【问题描述】：

我想做的是在 Vue.js 中制作不同颜色的 20px x 20px 小盒子。但是，每当我尝试执行:style='{ background-color: color.text }'（颜色是数据中具有属性文本的对象）时，它只会破坏应用程序并且它什么都没有显示。

没有:style='{ background-color: color.text }'的截图

:style='{ background-color: color.text }'inspector 的屏幕截图

（没有 id=app 的 div！）

代码： index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue Learning</title>
</head>
<body>
    <style>
        [v-cloak] {
            display: none;
        }
        .color-box {
            height: 20px;
            width: 20px;
        }
    </style>

    <div v-cloak id='app'>
        <div id='product'>
            <h1>{{ product }}</h1>

            <div class='product-image'>
                <img :src='image'>
            </div>

            <p v-if='inventory >= 50'>In stock</p>
            <p v-else-if='10 <= inventory && inventory < 50'>Almost in stock</p>
            <p v-else-if='inventory < 10'>Almost out of stock</p>
            <p v-else-if='inventory == 0'>Out of stock</p>

            <h3>Comes in the colors:</h3>
            <div v-for='color in colors'
                 :key='color.id'
                 @mouseover='changeColor(color.image)' class='color-box'
                 :style='{ background-color: color.text }'>
            </div>

            <button @click='addToCart'>Add to cart</button>
            <button @click='removeFromCart'>Remove item from cart</button>
            <p># of items in cart: {{ cart }}</p>
        </div>
    </div>

    <script src='https://cdn.jsdelivr.net/npm/vue'></script>
    <script src='main.js'></script>
</body>
</html>

main.js

let app = new Vue({
    el: '#app',
    data: {
        product: 'Socks',
        image: '',
        inventory: 9,
        colors: idify([
            {
                text: "green",
                image: 'socks.jpg'
            },
            { 
                text: "blue",
                image: 'blue-socks.jpg'
            }
        ]),
        cart: 0,
    },
    methods: {
        addToCart() { // ES6 shorthand for "addToCart: function() {"
            this.cart += 1
        },
        removeFromCart() {
            if (!this.cart) {
                return;
            }
            this.cart -= 1
        },
        changeColor(image) {
            this.image = image
        },
    }
})

app.image = app.colors[0].image

function idify(array) {
    let idcount = 0

    let array2 = []
    for (let value of array) {
        let obj = { id: idcount, ...value }
        array2.push(obj);
        idcount++;
    }

    return array2
}

function toTitleCase(str) {
    return str.replace(
        /\w\S*/g,
        function(txt) {
            return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
        }
    );
}

【问题讨论】：

标签： javascript html vue.js vuejs2

【解决方案1】：

background-color 在对象文字语法中不是有效的属性名称，因为 -。

您可以通过以下方式修复它：

:style="{ backgroundColor: color.text }"（特定于 Vue）
:style="{ 'background-color': color.text }"

【讨论】：