Vue.js前端开发实例｜使用v-bind为元素绑定单个style

Vue.js是一套构建用户界面的渐进式框架，摘用自底向上增量开发的设计，非常轻易与其他库或已有项目整合，在与相关工具和支持库一起使用时，能完美地驱动复杂的单页使用。

本系列所有Vue.js代码基于Vue.js 2.6.11，在IntelliJ IDEA 2019.2.3环境编写完成，在最新版的“搜狗高速浏览器”和“Google Chrome浏览器”测试成功。所有源代码不需要下载Vue.js的其他文件，在测试或使用时保持网络畅通即可。

下面这个实例演示了使用v-bind为元素绑定单个style。

01

实例功能

此实例主要通过使用v-bind:style在元素上绑定单个style，实现为元素设置不同样式的效果。当在浏览器中展示页面时，假如不勾选复选框，则文本展示效果如图1所示；假如勾选复选框，则文本在添加阴影之后的效果如图2所示。

展开全文

■ 图1

■ 图2

02

实现代码

在上面这段代码中，div v-bind:style="myChecked?{textShadow:myShadow}:''"表达假如myChecked的值为true，则在div元素上设置文本以阴影样式展示，即div v-bind:style="{textShadow:myShadow}"或div v-bind:style="{textShadow:'3px 5px 5px #656B79'}"。需要特殊注重的是：在Vue.js中，准则CSS的text-shadow属性必须写成textShadow，即往掉“-”，并且下一个字母大写；其他有“-”的CSS属性也按照此方式解决。

此实例的源文件是MyCode＼ChapD＼ChapD014.html。

03

源代码下载

关注微信公众号，后台回复要害词 “ Vue.js代码175” 即可获得完全源代码。

* 在测试代码时，必须保持网络畅通。

04

参考图书

《Bootstrap+Vue.js前端开发超实用代码集锦》

ISBN：978-7-302-56815-5

罗帅 罗斌 编著

定价：99.8元

扫码优惠购书