vue绑定class样式的方式

由于不同的业务逻辑，根据不同逻辑，有不同的class样式，因此绑定class样式有以下几种方式：
绑定class样式：字符串写法
绑定class样式：数组写法
绑定class样式：对象写法

// 绑定class样式：字符串写法
<template>//绑定class样式：字符串写法,适用于：样式的类名不确定，需要动态指定<view class="basic" :class="mood" @click="changeMood">{{name}}</view>//绑定class样式：数组写法,适用于：要绑定的样式个数不确定，名字也不确定<view class="basic" :class="classArr">{{name}}</view>//绑定class样式：对象写法,适用于：要绑定的样式个数确定，名字也确定，但要动态决定用不用<view class="basic" :class="classObj">{{name}}</view>
</template>
<script>
export default {data() {return {name:"class样式绑定",mood:'normal',classArr:["a","b","c"],//这样写便于对数组的增删改查，动态切换classObj:{a:false,b:false}//这样写便于动态切换};},methods: {changeMood() {//定义一个数组，用来改变样式的切换,利用数组的生成随机数函数实现const arr = ['happy','sad','normal']；this.mood = arr[Math.floor(Math.random()*3)]//Math.random()：0~1的随机数，不包含1}}
}
</script>
<style>
.basic{width:500px;height:200px;border:1px solid black;}.happy{border:5px solid red;background-color: rgba(255,255,0,0.644);background: linear-gradient(30deg,yellow,pink,orange,yellow);}.sad{border:5px solid rab(2,197,2);background-color: gray;}.normal{background: #1382f8;}.a{background: #8B008B;}.b{font-size:30px;text-shadow:2px 2px 10px red}.c{border-radius:20px}
</style>

vue绑定class样式的方式相关推荐

Vue绑定Class样式
Vue绑定Class样式 vue有一个控制样式的小技巧,适用于单个或多个元素需要多种风格样式的切换. 我们可以先准备一个基本样式,以及之后需要切换的多种样式类型 <style>.basic ...
23.Vue绑定style样式
目录 1.style样式对象写法 2.style样式数组写法 3.总结 22.Vue绑定class样式_爱米酱的博客-CSDN博客为了讲好class样式,我们这里提前准备了7个样式作为例子来讲解. b ...
vue中绑定style样式的方式
vue中绑定样式的方式有多种下面就来看看吧开始之前先准备一些样式 css样式 <style>.red {color: red}.green {color: green}.big {fo ...
Vue绑定style的使用方式(令组件复用)
<template><div><h3>Style动态样式绑定</h3><div style="width: 200px; height: ...
通过Vue绑定zoom样式值实现禁止页面放大缩小
思路:禁止浏览器通过CTRL+与CTRL-放大与缩小页面比例,我们可以通过当页面放大(会触发window.onresize事件)时控制样式属性zoom按相应比例缩小(同理缩小窗体时zoom放大)来实现 ...
【Vue框架】Vue绑定样式及案例之行内样式——对象绑定样式与数组控制样式（附带源码案例)
文章目录一.Vue样式绑定 1.1 Vue绑定class样式 1.2 Vue绑定行内样式 1.2.1 对象控制绑定样式 1.2.2 数组控制绑定样式 1.3 Vue绑定样式案例(标题排他) 1.4 ...
五十九、Vue中的样式绑定
@Author:Runsen @Date:2020/10/16 大四是一个焦虑的时期.烦恼有时候是具体问题带来的压力,有时候却是无端的.莫名其妙的,有时候还极易受到外界的影响,别人一句话就会激起内心难 ...
15 Vue中子组件样式的绑定和行内样式模版编写
[基础]模板样式绑定2-进阶场景子组件的样式绑定如何区分父子组件子组件使用样式的小坑行内样式的编写场景这篇文章继续学习Vue的模板样式绑定.上篇文章你已经对Vue中的样式绑定有一个基本了 ...
vue绑定class的几种方式
vue绑定class的几种方式 1.对象语法在对象上绑定class属性,来控制class 的几种状态. <body><div id = "app">< ...

vue绑定class样式的方式

vue绑定class样式的方式相关推荐

最新文章

热门文章