Vue 2.0的学习笔记:在Vue中使用样式

特别声明:小站已开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

到目前为止,学习Vue的时候也写了相当的示例,但老实说,这些示例在视觉上并没有什么吸引人的地方。今天我们将学习如何将样式运用到我们的元素中,让事情变得更加有趣。首先我们将通过将内联样式添加到HTML的元素中,其实也就是我们以前所说的内联样式。其实在学习v-bind的时候,我们已经或多或少的接触了,如何给元素添加内联样式或者绑定类名添加样式。但这可能不够系统,为了更好的学习这方面的知识,这篇文章专门是学习这方面知识而做的笔记。希望对和我一样的初学者有所帮助。

在Vue中使用内联样式

比如说,我们有一个widthheight都是200pxdiv,我想做的第一件事情就是设置这个元素的背景色为blue

<div style="width: 200px; height: 200px;" v-bind:style=""></div>

v-bind绑定到style属性时,表达式可以是对象也可以是数组。先看看对象语法是什么样子。这个对象中的键应该与想要设置的CSS样式相匹配,而值应该是一个表达式,它可以解析为一个值。在这种情况下,对象的keybackground-color。在JavaScript中,我们需要将键值放在引号内,因为它包含了一个破折号-。请注意,我将在这里使用单引号,因此不必避免双引号,因为它们会干扰HTML标记。

这就是我想要应用到div元素的样式的别名,对于值,也可以简单地在单引号中写入,比如blue

<div style="width: 200px; height: 200px;" v-bind:style="{ 'background-color': 'blue' }"></div>

我们期望看到一个blue的正方形。

在Vue中使用样式

事实上,这并没有起任何作用,因为我们在模板中直接定义了颜色。如果这就是我们所需要的,那么还不如直接在div元素的style属性中添加需要的样式,这样做将更有用。事实上,在Vue中通过v-bind绑定style是期望绑定一个动态颜色。让我们创建一个包含颜色的数据属性,并绑定到模板中的这个属性。

let app = new Vue({
    el: '#app',
    data () {
        return {
        color: 'blue'
        }
    }
})

现在我只需要将这个属性的名称作为background-color的表达式,结果是相同的。

<div style="width: 200px; height: 200px;" v-bind:style="{ 'background-color': color }"></div>

当然,这也不太有用,因为我们在Vue实例中硬编码了color。但这让我们能做的就是动态改变color。当我们这么做的时候,你也将会猜到,Vue将自动更新样式,因为我们已经将background-color绑定到了data中的color属性。为了展示这个效果,咱们可以添加一个button,给这个button绑定一个click事件,点击事件监听div颜色改变。

<div id="app">
    <button @click="{{changeColor}}">Click Me (^_^)</button>
    <div style="width: 200px; height: 200px;" v-bind:style="{ 'background-color': color }"></div>
</div>

使用Vue的computedbutton添加了changeColor。这个方法里侦听了background-color的改变,使用简单的if语句,将data中的colorblue转换成red

let app = new Vue({
    el: '#app',
    data () {
        return {
        color: 'blue'
        }
    },
    computed: {
        changeColor: function () {
            if (this.color = 'blue') {
                this.color = 'red'
            } else {
                this.color = 'blue'
            }
        }
    }
})

看到的效果如下:

在Vue中使用样式

当你点击按钮之后,我们看到div元素的背景从blue变成了red

上面的示例中,咱们使用的是Vue的computed,除了使用computed还可以使用methods或者说watch

你可能会想到,如果我们在模板中添加更多的属性,就很难读取它。为了解决这个问题,我们可以简单地将对象移到data中,并在模板中引用该属性,比如我将调用data中的styles属性。

将上面的代码稍微清理一下,历为我们将不再需要更改颜色的按钮。

data () {
    return {
        styles: {
            'background-color': 'blue'
 
剩余80%内容付费后可查看

如需转载,烦请注明出处:https://www.w3cplus.com/vue/bind-inline-style-and-class.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部