高性能网站建设指南pdf,wordpress oa系统,电信网站空间,队徽logo在线设计目录 一、class绑定1.1 字符串1.2 数组1.3 对象1.4 完整案例 二、style绑定2.1 案例2.2 效果 操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute#xff0c;所以我们可以用 v-bind 处理它们#xff1a;只需要通过表达式计算出字符串结果即可… 目录 一、class绑定1.1 字符串1.2 数组1.3 对象1.4 完整案例 二、style绑定2.1 案例2.2 效果 操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute所以我们可以用 v-bind 处理它们只需要通过表达式计算出字符串结果即可。不过字符串拼接麻烦且易错。因此在将 v-bind 用于 class 和 style 时Vue.js 做了专门的增强。表达式结果的类型除了字符串之外还可以是对象或数组。 一、class绑定 写法:classxxx 其中xxx可以是字符串(str)、对象(obj)、数组(arr)
字符串写法适用于类名不确定要动态获取对象写法适用于要绑定的样式个数确定名字也确定但要动态决定用不用数组写法适用于要绑定的样式个数不确定名字也不确定
1.1 字符串
其中divClass:normal ,最终会将样式拼接到class中即classbasic normal
div classbasic :classdivClass clickchangeClass{{name}}1.2 数组
其中divClassArr:[div1,div2,div3]最终会将样式拼接到class中即classbasic div1 div2 div3
div classbasic :classdivClassArr{{name}}/div1.3 对象
其中 divClassObj:{ div1:false, div2:true }
为false的样式不会生效最终会将样式拼接到class中即classbasic div2
div classbasic :classdivClassObj{{name}}/div1.4 完整案例
style.basic{height: 100px;width: 300px;padding: 10px;border: 1px solid #ccc;margin-bottom: 10px;}.normal{font-size: 14px;}.happy{background-color:bisque;}.sad{background-color: pink;}.div1{border-radius: 10px;}.div2{background-color: coral;}.div3{font-size: 20px;}
/style
div idroot!-- 绑定class样式---字符串写法适用于样式的类名不确定需要动态指定 --div classbasic :classdivClass clickchangeClass{{name}}/div!-- 绑定class样式---数组写法适用于要绑定的样式个数不确定名字也不确定 --div classbasic :classdivClassArr{{name}}/div!-- 绑定class样式---对象写法适用于要绑定的样式个数确定名字也确定但要动态决定用不用 --div classbasic :classdivClassObj{{name}}/div/divscriptnew Vue({el:#root,data:{name:我们一起去吃南京大排档吧,divClass:normal,divClassArr:[div1,div2,div3],divClassObj:{div1:false,div2:true}},methods: {changeClass(){const arr [happy,normal,sad]// 生成随机数函数[0-1)// Math.floor向下取整this.divClass arr[Math.floor(Math.random()*3)];}},})
/script最终生存的结构如下 二、style绑定 写法:stylexxx 其中xxx可以是对象(obj)、数组(arr)
:style{fontSize:xxx} 其中xxx是动态值对象:stylestyleObj数组:style[styleObj,styleObj2]、:stylestyleArr
2.1 案例
div idroot!-- 绑定style样式对象写法 --div classbasic :stylestyleObj{{name}}/div!-- 绑定style样式: 数组写法 --div classbasic :style[styleObj,styleObj2]{{name}}/divdiv classbasic :stylestyleArr{{name}}/div
/divscriptnew Vue({el:#root,data:{name:我们一起去吃南京大排档吧,styleObj:{fontSize:30px},styleObj2:{borderRadius:10px},styleArr:[{fontSize:30px},{borderRadius:10px}]}})
/script2.2 效果
上面案例最终的效果如下图所示
