vue学习笔记-6-样式绑定

一，通过标识位来控制class的样式是否启用

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">[v-cloak]{display:none}#app{width: 20%;margin: 200px auto;line-height: 40px;border: 1px solid #ccc;padding: 10px;}.active{height: 50px;width: 100;background: red;}</style></head><body><div id="app"><div :class="{active:isActive}"></div><!-- 利用v-bind来变更样式，其中active是class名，isActive是其标识位 --><button @click="changeClass1">样式是否启用的切换</button></div><script type="text/javascript" src="./js/vue.min.js"></script><script type="text/javascript">var vm=new Vue({el: "#app",data:{url:'http://www.baidu.com',isActive:true},methods:{changeClass1:function(){this.isActive=!this.isActive}}})</script></body>
</html>

二，通过数组类名的方法：

而对于数组语法，则是能够同时定义好几个类，然后，通过清空类名和设置类名的方式达到设置不同样式的效果：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">[v-cloak]{display:none}#app{width: 20%;margin: 200px auto;line-height: 40px;border: 1px solid #ccc;padding: 10px;}.color{height: 50px;width: 100;background: red;}.border{border: 2px solid #000;}</style></head><body><div id="app"><div :class="[class1,class2]"></div><!-- 里面有两个类名，对应不同的样式 --><button @click="changeClass1">不启用其中一个样式</button><button @click="changeClass2">启用其中一个样式</button></div><script type="text/javascript" src="./js/vue.min.js"></script><script type="text/javascript">var vm=new Vue({el: "#app",data:{url:'http://www.baidu.com',class1:'color',class2:'border'},methods:{changeClass1:function(){this.class2=''},changeClass2:function(){this.class2='border'}}})</script></body>
</html>

三，细节

1，对象绑定和数组绑定可以组合使用：

2，默认的class会保留
3，class绑定的值可以简化操作：

把类名存储到vm中的数组中。

四，一个样式通用，另一个样式随着v-for变化的写法

实现效果

五，结合三目运算符绑定样式，自定义轮播图的指示器

六，通用样式加三目运算符绑定样式

:class="['inputBox',drawerType=='积分操作'?'jifen':'huiyuan']"

七，样式绑定可以使用函数返回的形式

  <!-- 头部区域的样式 --><div class="styleHeader"><div  v-for="(item,index) in topStyle" :key="index" :class="[styleClass(topStyle,item.content)]" v-show="item.checked=='1'" :ref="item.content" @click="select(topStyle,item.content)">{{printStyleObj[item.content]}}            </div></div>

也就是说class中可以写函数，然后返回字符串作为类名。

//判断是否上方有空行emptyLineStyle(styleArr,params){if(styleArr[this.styleIndex(styleArr,params)].emptyLine=='0') {return ' '}else{return ' emptyLine'}},//样式变化的函数整合styleClass(styleArr,params){let classStr=" "classStr=classStr.concat(this.fontStyle(styleArr,params))classStr=classStr.concat(this.selected(styleArr,params))classStr=classStr.concat(this.dividingLineStyle(styleArr,params))classStr=classStr.concat(this.emptyLineStyle(styleArr,params))return classStr}

vue学习笔记-6-样式绑定相关推荐

vue学习笔记2-数据绑定
学习视频参阅:尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通
Vue学习笔记(六) 表单输入绑定
v-model 指令在表单元素上创建双向数据绑定,它负责用于监听用户输入事件以更新数据注意,v-model 会忽略所有表单元素特性的初始值,而总是将 Vue 实例的数据作为数据来源 1.输入框 &l ...
vue学习笔记-01-前端的发展历史（从后端到前端，再到前后端分离，再到全栈）
vue学习笔记-01-前端的发展历史(从后端到前端,再到前后端分离,再到全栈) 这篇文章是博主在看vue-前端发展简史的时候做的笔记,以供后续学习复习文章目录 vue学习笔记-01-前端的发展历 ...
Vue学习笔记（三）Vue2三种slot插槽的概念与运用 | ES6 对象的解构赋值 | 基于Vue2使用axios发送请求实现GitHub案例 | 浏览器跨域问题与解决
文章目录一.参考资料二.运行环境三.Vue2插槽 3.1 默认插槽 3.2 具名插槽 3.3 作用域插槽 ES6解构赋值概念 & 作用域插槽的解构赋值 3.4 动态插槽名四.GitHu ...
Vue.js 基础语法入门语句 Vue学习笔记 v-model 双向数据绑定
Vue.js 基础语法,入门语句,Vue学习笔记学习网站:https://www.bilibili.com/video/BV15741177Eh vue 的体验响应式:数据一旦改变,视图就会响应改 ...
【Vue学习笔记_03】v-bind动态绑定属性
[Vue学习笔记_03]v-bind动态绑定属性 v-bind基本使用 v-bind动态绑定class 对象语法(很常用) 数组语法 v-bind动态绑定style 对象语法数组语法配套可执行代码 ...
Vue学习笔记01——Vue开发基础
一.Vue实例配置选项选项说明 data Vue实例数据对象 methods 定义Vue中的方法 components 定义子组件 computed 计算属性 filters 过滤器 el 唯一根 ...
Vue学习笔记05 组件的自定义事件-组件通信-$nextTick-脚手架解决ajax跨域-插槽-过渡动画
文章目录 Vue学习笔记05 父组件给子组件传值注意点子组件给父组件传值父组件接受子组件的传值通过函数组件的自定义事件事件绑定的第一种写法 @或v-on 事件绑定的第二种写法:使用ref ...
菜鸟Vue学习笔记（三）
菜鸟Vue学习笔记(三) 本周使用了Vue来操作表单,接下来说下Vue中双向绑定表单元素的用法. Vue中双向绑定是使用的v-model,所谓的双向绑定即改变变量的值,表单元素的值也会改变,同样的,改 ...
Vue学习笔记进阶篇——Render函数
本文为转载,原文:Vue学习笔记进阶篇--Render函数基础 Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML.然而在一些场景中,你真的需要 JavaScript 的完全编 ...

vue学习笔记-6-样式绑定

一，通过标识位来控制class的样式是否启用

二，通过数组类名的方法：

三，细节

四，一个样式通用，另一个样式随着v-for变化的写法

五，结合三目运算符绑定样式，自定义轮播图的指示器

六，通用样式加三目运算符绑定样式

七，样式绑定可以使用函数返回的形式

vue学习笔记-6-样式绑定相关推荐

最新文章

热门文章