在实际开发中经常会遇到动态操作元素样式的需求。因此,vue 允许开发者通过 v-bind 属性绑定指令,为元素动态绑定 class 属性的值和行内的 style 样式。
可以通过三元表达式,动态的为元素绑定 class 的类名。示例代码如下:
MyDeep组件
data() { return { isItalic: true }}.thin{ // 字体变细 font-weight:200;}.italic{ // 倾斜字体 font-style: italic;}
如果元素需要动态绑定多个 class 的类名,此时可以使用数组的语法格式:
MyDeep 组件
data(){ return { isItalic: true, isDelete: false, }}
使用数组语法动态绑定 class 会导致模板结构臃肿的问题。此时可以使用对象语法进行简化:
MyDeep 组件
data(){ return { classobj:{ //对象中,属性名是class 类名,值是布尔值 italic: true, delete: false, } }}
4. 以对象语法绑定内联的 style
:style 的对象语法十分直观——看着非常像 CSS,但其实是一个 JavaScript 对象。CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case,记得用引号括起来) 来命名:
黑马程序员data() { return { active: 'red', fsize: 30, bgcolor:'pink', }}
Copyright © 2013-2021 河南ayx爱游戏体育(中国)官方网站官方数据信息技术有限公司 豫ICP备14003305号-5 ISP经营许可证:豫B-20160281