Vue样式绑定(vue样式绑定案例)

Vue样式绑定

Class和style是HTML元素的属性，用于设置元素的样式。我们可以使用v-bind来设置样式属性。Vue.jsv-bind在处理类和样式时得到了专门增强。除了字符串之外，表达式的结果类型还可以是对象或数组。

文末名片获取源码

精彩专栏持续更新。推荐订阅。收集并跟随以避免迷路。

微信小程序实战开发专栏

1.样式绑定1.1动态规范1.2数组写入1.3对象写入1.4内联样式一.样式绑定

1.1动态指定

开始前的准备工作如下：预设样式样式、html容器和vue实例对象

项目启动后效果如下

样式.basic{width:200px;高度：200px；颜色：黑色；border:1px纯黑色；}.basic2{width:200px;高度：200px；颜色：白色；背景：绿色；}.cat1{width:200px;高度33360200像素；颜色：绿色；}.cat2{背景：黄色；}.cat3{font-weight:粗体；}/styledivclass='basic':class='classIcon'@click='changeBackground'{{name}}/div

目前我们看到的样式效果都是在style中定义的，通过class来指定的。那么需求就出现了。如何在单击时更改div的背景颜色？

在JS中，可以通过操作dom来修改元素的class属性。

vardiv=document.getElementById('div1');div.className='style2';div.setAttribute('class','style2');

但既然使用了Vue，入乡随俗就必须用Vue来解决，而用传统的方式修改则存在不确定性，因为在界面中，需要操作的元素的样式可能会不断变化；

使用v-bind的缩写向标签添加另一个类，并添加一个单击事件。

在css中定义basic2样式并启动项目。可以看到，当点击div时，字体和背景颜色都发生了变化。这说明动态指定的类事件已经生效了。

当你在网页上右键查看源代码时，可以看到div上只剩下一个类，而我们的代码中却有两个类。这是因为动态指定的类样式最终会收敛为普通的类样式。

1.2数组写法

本节主要针对样式数量和名称不确定的场景，通过数组编写方式绑定类样式。

首先准备三个风格效果不同的班级风格。

.cat1{宽度：200px;高度：200px；color:绿色；}.cat2{背景：黄色；}.cat3{font-weight:粗体；}

在vue实例中定义一个数组并指定类名

在html中的div标签中绑定arr

div:class='arr'{{name}}/div

运行项目可以看到数组模式下的样式也被绑定了。数组方式绑定类样式适用于样式数量和名称不确定的场景。

1.3对象写法

对象写入方法与类样式绑定。适用于样式数量和名称确定的场景。但需要根据业务场景动态决定是否使用。可以简单的应用在切换标签时根据不同的下标显示不同的效果。

该对象在vue实例数据中定义如下，以普通键值对的形式存储。key为需要绑定的类名，value为bool类型。如果需要显示则为true，否则为false。

info:{'cat1':false,'cat2':false,},

绑定页面标签中的样式。因为数据中两个类都是false，所以页面解析后没有样式绑定。

将定义的值改为true，再次刷新页面，这次就可以渲染了。

1.4内联样式

内联样式绑定适用于需要根据行内数据形式进行不同显示的场景。常规的内联样式如下

divclass='basic'style='color:red;'{{name}}/div

在vue中，绑定仍然是通过v-bing的缩写来完成，但是需要添加一个单括号，别忘了在data中定义它

divclass='基本':style='{color:fontColor}'{{name}}/div