Vue与class和style

简介

这篇文章主要介绍如何在vue中绑定class和样式。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue与css</title><style>.basic{height: 200px;margin-bottom: 10px;margin-top: 10px;background-color: grey;}.happyMood{background-color: pink;}.sadMood{background-color: black;}.nomalMood{background-color: green;}.c1{background-color: black; }.c2{height: 400px;}.c3{border-radius: 50%;}</style>
</head>
<body><div id="root"><!-- 创建三个div，默认有basic类，然后展示三种不同绑定样式的方法 --><!-- 第一种使用属性名的方式指定，这样的情况适用于该元素的绑定的动态类只有一个，但是类名不确定的情况。 --><div class="basic" :class="mood"></div><button @click="changeMood">随机切换心情</button><!-- 第二种方式是使用数组的方式，适用于绑定的类的个数不确定，名字也不确定 --><div class="basic" :class="cArr"></div><button @click="m1">使用背景色为黑色和椭圆形</button><button  @click="m2">使用背景色为黑色和加大高度</button><button  @click="m3">使用背景色为黑色和圆形和加大高度</button><!-- 第三种方式是使用对象的方式，适用于数量确定，名字确定，但是是否使用不确定 --><div class="basic" :class="cObj"></div><button @click="m4">使用背景色为黑色</button><button @click="m5">取消背景色为黑色</button><button  @click="m6">使用椭圆形</button><button  @click="m7">取消椭圆形</button><button  @click="m8">使用加大高度</button><button  @click="m9">取消加大高度</button><!-- 这个说明vue使用style内联样式 --><div class="basic" :style="styleObj"></div></div><script src="./js/vue.js"></script><script>new Vue({el:"#root",data:{mood:"",moodNameArray:["happyMood","sadMood","nomalMood"],cArr:[],c1:"c1",c2:"c2",c3:"c3",cObj:{//属性名是类名，值是true（使用）false（不使用）c1:false,c2:false,c3:false},styleObj:{//属性名是样式名，属性值是样式值//椭圆加边框"border-radius": "50%","border":" black solid 5px"}},methods: {changeMood(){//获取0-2的随机整数let index = Math.round(Math.random()*2+0);this.mood = this.moodNameArray[index];},m1(){this.cArr = ["c1","c3"];},m2(){this.cArr = ["c1","c2"];},m3(){this.cArr = ["c1","c2","c3"];},m4(){this.cObj.c1 = true;},m5(){this.cObj.c1 = false;},m6(){this.cObj.c3 = true;},m7(){this.cObj.c3 = false;},m8(){this.cObj.c2 = true;},m9(){this.cObj.c2 = false;},},})</script>
</body>
</html>

效果可以复制代码自行验证

Vue与class和style相关推荐

[vue] vue的:class和:style有几种表示方式？
[vue] vue的:class和:style有几种表示方式? :class 绑定变量绑定对象绑定一个数组绑定三元表达式 :style 绑定变量绑定对象绑定函数返回值绑定三元表达式个人简 ...
vue入门实践，style和数据绑定
初阶版需要注意的地方由于方块变化框与下方ctrl部分共享一个动态参数counter,所以这两部分要包裹在同一个id之下,实现数据共享. 给style添加绑定之后,由于样式参数要动态变化,所以直接将 ...
Vue.js Class 与 Style 绑定
操作元素的 class 列表和内联样式是数据绑定的一个常见需求.因为它们都是属性,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可.不过,字符串拼接麻烦且易错.因此,在将 ...
VUE：class与style强制绑定
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>< ...
vue 动态拼接style_vue style width a href动态拼接问题的解决
style width 这个问题折磨了我一个上午了好惭愧因为项目涉及到进度条所以必须用行内样式 style 用过vue的都知道 vue中style的用法大众用法 :style=" ...
【Vue】Class与Style的绑定 —— 绑定对象与数组
引言操作元素的 class 列表和内联样式是数据绑定的一个常见需求因为它们都是属性,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可不过,字符串拼接麻烦且易错. 因此 ...
记录vue绑定class和style出现先后顺序问题
近期做项目,发现一个新的问题,废话不多说,直接上代码`<div><span>手机号:</span><input type="text" @ ...
vue中动态设置style样式和使用filters过滤器设置样式
例如:想给图片增加高度和宽度 <el-image :class="classRotation"v-if="imageData.src !== undefined&q ...
vue文件里在style的样式需要什么loader_Vue学习笔记之Webpack中css、less、图片等文件处理...
一.webpack中使用css文件: loader是webpack中一个非常核心的概念,去转化webpack不能转化或打包的文件. 安装loader: 官网介绍: 安装: cnpm install - ...

Vue与class和style

简介

Vue与class和style相关推荐

最新文章

热门文章