Vue之动态绑定CSS样式
demo.html
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-html="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Vue Demo</title>
<!--自选版本-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>-->
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<!--<script src="https://cdn.jsdelivr.net/npm/vue"></script>-->
<link href="style.css" rel="stylesheet">
</head>
<body>
<div id="app">
<div>
<h2>动态绑定CSS样式</h2>
<div>
<h4>示例一</h4>
<div v-on:click="varChangeColor = !varChangeColor" v-bind:class="{changeColor:varChangeColor}">
<span>点击切换颜色</span>
</div> <hr>
<h4>示例二</h4>
<button v-on:click="varChangeColor = !varChangeColor">改变颜色</button>
<button v-on:click="varChangeLength = !varChangeLength">改变长度</button>
<button v-on:click="varChangeLength = !varChangeLength,varChangeColor = !varChangeColor">两者都改变</button>
<!--computed属性封装对象-->
<div v-bind:class="computedClass">
<span>测试内容</span>
</div>
</div> </div> </div>
<script src="app.js"></script> </body>
</html>
app.js
var app = new Vue({
el: '#app',
data: {
varChangeColor: false,
varChangeLength: false,
},
methods: {},
computed: {
computedClass: function () {
return {
changeColor: this.varChangeColor,
changeLength: this.varChangeLength
}
},
}
})
style.css
span {
background: red;
display: inline-block;
padding: 10px;
color: #fff;
margin: 10px 0;
}
.changeColor span {
background: green;
}
.changeLength span:after {
content: "length";
margin-left: 10px;
}
截图：
Vue之动态绑定CSS样式的更多相关文章
- Angular21 动态绑定CSS样式
1 需求 在前端开发中通常需要动态对某些元素的样式进行动态设定,传统的CSS绑定分为CSS类绑定和Style样式绑定:在Angular中利用相关指令同样可以完成CSS类绑定和CSS样式绑定 2 内置指 ...
- Vue 动态绑定CSS样式
今天在做项目上遇见了一个需求,通过不能的进度类型展示不同的进度形态,进度形态通过背景色和背景色上的文字显示. 效果图: 由于Element UI版本我用的是2.5.4 使用进度条的话 就没有2.9. ...
- Vue.js 控制css样式
<script src="https://unpkg.com/vue/dist/vue.js"></script> <style type=" ...
- Vue 框架-05-动态绑定 css 样式
Vue 框架-05-动态绑定 css 样式 今天的小实例是关于 Vue 框架动态绑定 css 样式,这也是非常常用的一个部分 首先说一下 动态绑定,相对的大家都知道静态绑定,静态绑定的话,直接加 cl ...
- vue 项目不显示样式 排版错乱
vue中的css 样式都在index.html中 看这里是否有导入css
- vue环境下安装npm,启动npm 修改js,css样式
vue环境下修改js,css样式 1.在所在的项目项目的resource 文件夹下面,shift + 鼠标右键--在此处打开命令行窗口: 2.在打开的窗口执行: 安装npm:npm install 启 ...
- vue动态绑定类样式ClassName知多少
对于动态绑定类样式,之前用的最多的也就是:class="{'classA':true}" ,今天遇到一种情况,就是要给元素动态添加一个保存在数据源中的类样式,那前边的这种写法显然满 ...
- VUE中CSS样式穿透
VUE中CSS样式穿透 1. 问题由来 在做两款H5的APP项目,前期采用微信官方推荐的weui组件库.后来因呈现的效果不理想,组件不丰富,最终项目完成后全部升级采用了有赞开发的vant组件库.同时将 ...
- Vue设置全局js/css样式
''' 配置全局js mian.js: import settings from '@/assets/js/settings' Vue.prototype.$settings = settings; ...
随机推荐
- ubantu服务器配置ss
阿里云 ubantu16.0(自带pip) 服务端 $ apt-get install python-pip $ pip install shadowsocks $ vim /etc/shadowso ...
- i春秋-百度杯十月场-vld
查看源码,有提示,index.php.txt , 进入得到文本. 不太看得懂,后来百度,大致就是,flag1=.......&flag2=......&flag3=...... , ...
- Jmeter读取Excel，BeanShell取样器调用rt.jar和jxl.jar
将rt.jar和jxl.jar,放在\apache-jmeter-5.0\lib\ext下面 import java.io.*; import java.util.ArrayList; import ...
- Spring_AOP 记录系统关键操作日志用法
问题: 系统需要记录用户的关键操作日志,以便后期的系统维护,方便的查看问题,及时排除 分析: (1)保存字段:作为一个日志记录功能,首先数据库新建一张表保存用户的操作关键字段, 用户名,ip,操作描述 ...
- Numpy数组的保存与读取
1. 数组以二进制格式保存 np.save和np.load是读写磁盘数组数据的两个主要函数.默认情况下,数组以未压缩的原始二进制格式保存在扩展名为npy的文件中,以数组a为例 np.save(&quo ...
- MVC5+EF6 --自定义控制Action访问权限
本章主要讲解在MVC中灵活控制Action的访问权限: 本章所使用的示例表也是上一张所使用的TbUser.TbRole.TbUserRole: 最终的效果是针对任意一个Action或Controlle ...
- Taro、Weex、Hippy 齐聚IMWebConf 2018！
IMWebConf 2018 前端大会,10 月 14 日重磅来袭! 想了解 2018 前端前沿技术和发展趋势?想挖掘前端更深远的价值?就在这个秋季,第七届 IMWebConf 大会重磅来袭,我们邀请 ...
- 了解sso原理
- 记一个JS树结构路径查找
var a=[ { "id" : "0000", "text" : "R1", "children" ...
- 项目笔记-SC01
项目启动已有两周,从分析需求到系统设计,文档性工作比较多,只是文档参考比较少,相对的标准就不好界定了. 计划开发时间理论上是按部就班的,没什么变化,可能真正进入开发阶段才会遇到一些问题吧,有些问题就是 ...