vue里的样式添加之类名改动 和style改动
2024-10-14 17:15:54
类名下有不同样式,通过增加或者减少类名,来增加或减少样式。
v-bind:class = {类名:变量,类名:变量。。。} 变量为布尔值,如果是true则类名添加,反正类名不添加到该元素身上
v-bind:class =“ [‘类名1’,‘类名2’,。。。]”(字符串代表数据类名)
v-bind: class=“[变量名,变量名2]”
v-bind:class = [类名1,类名2,{类名3:变量}。。。]
style的数据绑定和class一致,
:style=‘变量名’;
:style= '[变量名1, 变量名2]'
.div {
height: 100px;
width: 100px;
background: yellow
}
.circle {
border-radius: 50%
}
</style>
<script src="vue.js"></script>
</head> <body>
<div id="app">
<div class="div" v-bind:class={circle:isCircle}></div>
<button v-on:click='isCircle=!isCircle'>click</button>
</div> <script>
var vm = new Vue({
el: '#app',
data: {
isCircle: true
} })
最新文章
- Block的用法
- 一个有趣的模拟光照的shader
- ✡ leetcode 161. One Edit Distance 判断两个字符串是否是一步变换 --------- java
- A Brief History of Scaling LinkedIn
- oGrid 介绍如何从 server 取的资料
- Hibernate常用配置文件详解
- android架构图示
- fill与memset的区别
- js监听输入框值的即时变化onpropertychange、oninput
- Jquery中$.post()与$.get()区别
- HTML5和CSS3实例教程[总结一]
- MFC多线程内存泄漏问题&;amp;解决方法
- C语言之逻辑运算符
- 关于table参数的一些问题
- UVa 10137 &; ZOJ 1874 The Trip
- Shell 基础
- html5 旋转导航练习
- gradle project sync failed.please fix your project and try again-Android Studio3.1.2运行出错
- ECShop全系列版本远程代码执行高危漏洞分析+实战提权
- Django之时间的设置
热门文章
- 【转】fiddler抓包HTTPS请求
- C# 枚举类型 enum
- iOS NSDictionary 转Json 去掉换行去掉空格
- angular 2 - 002 - 基本概念和使用
- BFC 形成条件
- PDO::__construct(): Server sent charset (255) unknown to the client. Please, report to the developers
- Effective Java 第三版——71. 避免不必要地使用检查异常
- Visual Studio 2015 msvsmon.exe crashed when c++ debugging with x64
- Asp.Net WebApi 跨域设置
- spring源码:web容器启动