13518219792

Vue.jsClass与Style绑定-创新互联

Class与Style绑定

成都创新互联服务项目包括巴宜网站建设、巴宜网站制作、巴宜网页制作以及巴宜网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，巴宜网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到巴宜省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！

对于数据绑定，一个常见的需求是操作元素的 class 列表和它的内联样式。因为它们都是属性，我们可以用 v-bind 来处理它们：只需要计算出表达式最终的字符串。

不过，字符串拼接麻烦又易错，因此，在 v-bind 用于 class 和 style 时，Vue.js 专门增强了它。表达式的结果类型除了字符串以外，还可以是对象或数组。

绑定HTML Class

1、对象语法

我们可以传给 v-bind:class 一个对象，以动态地切换 class

上面的语法表示 class active 的更新将取决于数据属性 isActive 是否为真值

我们也可以在对象中传入更多属性，用来动态切换多个class。此外，v-bind:class 还可以与普通的 class 属性共存

以上代码渲染为：

Vue.js Class与Style绑定

当isRipe 和 isNotRipe变化时，class列表将相应地更新。例如，如果 isNotRipe变为true，那么 class 列表将渲染成“static orange pear”。（一般情况下，v-bind:class 绑定的对象中只有一个class会生效，这取决于用户自己的设置）

注意：尽管可以用{{}}标签绑定 class，比如 class = "`className`"，但是不推荐这种写法和 v-bind:class 混用

我们也可以直接绑定数据中的一个对象，代码如下：

还可以在这里绑定一个返回对象的计算属性，这是一种常用且强大的模式，看一段示例代码：

渲染为：

2、数组语法

我们可以把一个数组传给 v-bind:class ，以应用一个 class 列表：

渲染为：

Vue.js Class与Style绑定

如果想根据条件切换列表中的 class，则可以用三元表达式，代码如下：

此例始终添加 errorClass，但是只有在 isActive 为true 时添加 activeClass

不过，当有多个条件 class 时这样写有些繁琐。在Vue.js 1.0.19及以后的版本中，可以在数组语法中使用对象语法。示例如下：

3、With Components

如果把 class 属性用在一个自定义组件上，这些 class 会被添加到组件的根元素上，根元素上已经存在的class将不会被覆盖

看一段示例代码：

渲染为：

Vue.js Class与Style绑定

这个也同样适用于绑定 class，看一段示例代码：

当 isActive 为true 时，代码被渲染为：

Vue.js Class与Style绑定

绑定内联样式

1、对象语法

v-bind:style 的对象语法十分直观——看着非常像 CSS ，其实它是一个 JavaScript 对象。 CSS 属性名可以用驼峰式（camelCase）或短横分隔命名（kebab-case）：

Hello World!

页面效果截图：

Vue.js Class与Style绑定

通常直接绑定到一个样式对象更好，让模板更清晰，代码示例如下：

Hello World!

同样的，对象语法常常结合返回对象的计算属性使用，例如

Hello World!

Vue.js Class与Style绑定

2、数组语法

v-bind:style 的数组语法可以将多个样式对象应用到一个元素上：

3、自动添加前缀

当 v-bind:style 使用需要特定前缀的 CSS 属性时，如 transform ，Vue.js 会自动侦测并添加相应的前缀。

一般来说，浏览器私有前缀包括Firefox 的 -moz-，IE的 -ms-，Safari 和 Chrome 的 -webkit-，Opera的 -o-，但是Vue.js 只添加了前面三种前缀。这里需要注意一下

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

网页名称：Vue.jsClass与Style绑定-创新互联
网页网址：http://njwzjz.com/article/dcsohs.html

其他资讯