嘿宝贝们！ 学习如何使用 Vue 动态更改内容的最简单方法是使用像完整背景颜色更改这样的大内容。 该项目将使用 Vue 实例，因为这是开始使用 Vue 的最简单方法。

首先让我们从我们的index.html开始：

创建 HTML：

我们制作基本结构（！或 html5 – 在 VSCode 中）。

然后我们添加一个idu003d“app”的div。 这是我们的 Vue 实例将被安装的地方。

然后我们添加脚本。 我们将使用 Vue CDN()，然后链接我们自己的脚本。

进入全屏模式 退出全屏模式

创建JS：

现在我们将创建我们的实例。

我们需要的只是获取变量作为新的 Vue，然后将其提供给我们在 html 中挂载实例的位置。 我们之前调用了 div 应用程序，这就是我们要编写的内容。

作为数据，我们只需要变量 bgColor 并将其分配为十六进制的白色。

var app = new Vue({
    el:'#app',
    data:{
        bgColor: '#ffffff',
    },
})

进入全屏模式 退出全屏模式

现在我们回到 HTML：

现在，我们添加另一个 div 来包含内部背景，并将样式绑定到变量 bgColor。 注意属性样式前面的冒号，它是 v-bind 的快捷方式。 在我们的内部样式 { } 中，我们对带有 – 破折号的术语使用驼峰式命名法。 我们将简单的 h1 与典型的“Hello World!”结合起来。 然后我们的标签和颜色输入来改变颜色。

输入、选择、文本区域和其他组件是唯一应该使用 v-model 的组件卡通形象，否则使用 v-bind。

我们的颜色选择器是一个输入，因此我们使用不带变量 bgColor 的 v 模型。

我还在输入中添加了 :style 变量以避免丑陋的边框id怎么设置背景颜色卡通人物，但如果您愿意，您可以忽略它。

  
        

            
Hello World!
            Background Color
            
             
        

进入全屏模式 退出全屏模式

CSS：

您还可以将 css 添加到带有链接的 html 中，并添加以下代码以使其完美居中。

*{
    margin: 0;
    padding: 0;
}
.full-height{
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

进入全屏模式 退出全屏模式

[

](%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/ /uploads/articles/8np67ui1adm20iwg7f4p.gif)

你最终会得到这样的结果！ 我试图解释如何动态地执行此操作，同时解释一点 Vue。

更多信息id怎么设置背景颜色，您可以阅读Vue文档：

实例视图

文档视图