在vue中实现了在样式里使用js变量的方法

JavaScript013

在vue中实现了在样式里使用js变量的方法,第1张

这样我们就在vue中实现了在样式里使用js变量的方法:

及通过css定义变量的方式,将变量在行内注入,然后在style中使用var()获取我们在行内设置的数据即可。

利用Vue.js库中的v-bind绑定样式属性:

第一步,创建静态页面vbind.html,并引入vue.js文件

第二步,在主体里插入一个div标签元素,并在div中插入img元素,利用v-bind绑定img的src属性

第三步,利用Vue.js代码绑定src属性,默认为项目中的图片

第四步,由于图片比较小,添加一个间隔,padding属性

第五步,预览该静态页面,这时在页面上显示一个小图片

第六步,打开浏览器下方调试工具,可以看到div中的img的src属性值