2021-7-7 VUE动态样式
Vue的动态样式实例1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.active{
border: 2px solid darkred;
width: 100px;
height: 100px;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="aaa" @click="handle" name="">
<div :class="{active:vis}"></div>
</div> <script>
Vue.config.keyCodes.a=65;
new Vue({
el: '#app',
data: {
vis:false
},
methods:{
handle:function(event){
this.vis=this.vis?false:true;
// this.vis=!this.vis;
}
}
})
</script>
</body>
</html>
对象实例
Vue的动态样式实例2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.active{
border: 2px solid darkred;
width: 100px;
height: 100px;
}
.new{
background-color: green;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="aaa" @click="handle" name="">
<div :class="[activeClass,newClass]"></div>
</div> <script>
Vue.config.keyCodes.a=65;
new Vue({
el: '#app',
data: {
activeClass:'active',
newClass:'new'
},
methods:{
handle:function(event){
this.newClass=''; }
}
})
</script>
</body>
</html>
数组实例
Vue的动态样式实例3
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.active{
border: 2px solid darkred;
width: 100px;
height: 100px;
}
.new{
background-color: green;
}
.money{
color: yellow;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="aaa" @click="handle" name="">
<div :class="[activeClass,newClass,{money:isMoney}]">rnm,退钱</div>
</div> <script>
Vue.config.keyCodes.a=65;
new Vue({
el: '#app',
data: {
activeClass:'active',
newClass:'new',
isMoney:false
},
methods:{
handle:function(event){
this.isMoney=!this.isMoney;
}
}
})
</script>
</body>
</html>
数组加对象组合实例
Vue的动态样式实例4
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.active{
border: 2px solid darkred;
width: 100px;
height: 100px;
}
.new{
background-color: green;
}
.money{
color: yellow;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="aaa" @click="handle" name="">
<div :class="arrClasses">rnm,退钱</div>
<div :class="objClasses">rnm,退钱</div>
</div> <script>
new Vue({
el: '#app',
data: {
arrClasses:['active','new'],
objClasses:{
money:true
}
},
methods:{
handle:function(event){
this.arrClasses=[];
this.objClasses.money=!this.objClasses.money;
}
}
})
</script>
</body>
</html>
数组实例
Vue的动态样式实例5
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.active{
border: 2px solid darkred;
width: 100px;
height: 100px;
}
.new{
background-color: green;
}
.money{
color: yellow;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="aaa" @click="handle" name="">
<div :class="arrClasses">rnm,退钱</div>
<div :class="objClasses">rnm,退钱</div>
</div> <script>
new Vue({
el: '#app',
data: {
arrClasses:['active','new'],
objClasses:{
money:true
}
},
methods:{
handle:function(event){
this.arrClasses=[];
this.arrClasses.push('active');
this.arrClasses.push(this.objClasses); }
}
})
</script>
</body>
</html>
样式push数组
如果class和v-bind:class混用，那么两种样式会结合在一起
Vue的Style直接指定样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div :style="{border:borderStyle,width:widthStyle,height:heightStyle}">rnm,退钱</div>
<input type="button" value="改变" name="" @click="handle">
</div> <script>
new Vue({
el: '#app',
data: {
borderStyle:'1px solid red',
widthStyle:'200px',
heightStyle:'300px'
},
methods:{
handle:function(event){
this.borderStyle='1px solid blue';
}
}
})
</script>
</body>
</html>
Style样式
Vue的对象Style直接指定样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div :style="rnmStyle">rnm,退钱</div>
<input type="button" value="改变" name="" @click="handle">
</div> <script>
new Vue({
el: '#app',
data: {
rnmStyle:{
border:'1px solid red',
width:'200px',
height:'300px',
}
},
methods:{
handle:function(event){
this.rnmStyle.height='100px';
}
}
})
</script>
</body>
</html>
对象Style
Vue的数组混合对象Style的直接指定样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div :style="[rnmStyle,tuiqianStyle]">rnm,退钱</div>
<input type="button" value="改变" name="" @click="handle">
</div> <script>
new Vue({
el: '#app',
data: {
rnmStyle:{
border:'1px solid red',
width:'200px',
height:'300px',
},
tuiqianStyle:{
width:'100px',
height:'100px'
}
},
methods:{
handle:function(event){
this.rnmStyle.height='100px';
}
}
})
</script>
</body>
</html>
数组对象Style
数组样式后面一个会覆盖前面的样式
2021-7-7 VUE动态样式的更多相关文章
- vue 动态样式
<p :style="{width:'4px',height: '24px',background: '#f7ce51'}"></p> <p:styl ...
- vue动态样式设置
思路: 通过 v-bind:class="true ? style1 : style2 " 配合三元表达式完成样式的切换 具体实现 //return设置控制的参数 //有多个需要样 ...
- vue中动态样式不起作用？ scoped了解一下
vue中style标签使用属性scoped的注意事项 style上添加属性scoped可以实现样式私有化,但是在使用动态样式时,样式会不起作用.可以先去掉scoped
- vue基础-动态样式&表单绑定&vue响应式原理
动态样式 作用:使用声明式变量来控制class和style的值 语法: :class/:style 注意:尽可能不要把动态class和静态class一起使用,原因动态class起作用的时间会比较晚,需 ...
- vue 绑定样式的几种方式
vue 绑定样式 对象语法 1.v-bind:class设置一个对象,动态切换class <div :class="{'active':isActive}">xxx&l ...
- vue.js样式绑定
vue.js样式绑定 class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性. Vue.js v-bind 在处理 class 和 styl ...
- 10.Vue.js 样式绑定
Vue.js 样式绑定 Vue.js class class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性. Vue.js v-bind 在处 ...
- 深入理解脚本化CSS系列第五篇——动态样式
前面的话 很多时候,DOM操作比较简单明了,因此用javascript生成那些通常原本是HTML代码生成的内容并不麻烦.但由于浏览器充斥着隐藏的陷阱和不兼容问题,处理DOM中的某些部分时要复杂一些,比 ...
- DOM动态脚本和动态样式
动态脚本 [定义] 在页面加载时不存在,但将来的某一时刻通过修改DOM动态添加的脚本. [方式] [1]插入外部文件方式 var script = document.createElement(&qu ...
- Less （一种动态样式语言）
Less (一种动态样式语言). LESS是一种由Alexis Sellier设计的动态层叠样式表语言,受Sass所影响,同时也影响了 Sass的新语法:SCSS. LESS是开源的,其第一个版本由R ...
随机推荐
- vue中watch的详细用法（深度侦听）
vsCode插件 在vue中,使用watch来响应数据的变化.watch的用法大致有三种.下面代码是watch的一种简单的用法: <input type="text" v-m ...
- Locust 任务类介绍
前言: 任务:简单的理解就是,你想要你脚本的虚拟用户去做哪些事,比如请求某一个接口,或者执行某一个事件 用户:可以理解为,执这个任务的实例主体,或者在locust 中,也可以认为是一群蝗虫 一.Tas ...
- 点&边双连通分量
双连通分量 参考博客:https://www.cnblogs.com/jiamian/p/11202189.html#_2 概念 双连通分量有点双连通分量和边双连通分量两种.若一个无向图中的去掉任意一 ...
- Django笔记三十五之admin后台界面介绍
本文首发于公众号:Hunter后端 原文链接:Django笔记三十五之admin后台界面介绍 这一篇介绍一下 Django 的后台界面使用. Django 自带了一套后台管理界面,可用于我们直接操作数 ...
- 长文多图一步步讲清楚：DDD理论、建模与代码实现全流程
欢迎大家关注公众号「JAVA前线」查看更多精彩分享文章,主要包括源码分析.实际应用.架构思维.职场分享.产品思考等等,同时欢迎大家加我个人微信「java_front」一起交流学习 1 六个问题 1.1 ...
- 2020-09-16：谈谈TCP的控制位？
福哥答案2020-09-16:#福大大架构师每日一题# 福哥口诀法:紧确推和复同终(紧急位URG,确认位ACK,推送位PSH,复位位RST,同步位SYN,终止位FIN). [答案来自此链接](http ...
- Django-账号用户密码修改
Django账号密码修改命令: python manage.py changepassword python manage.py changepassword 实操分析: 第一次修改失败是因为违反了密 ...
- vue小坑之Vetur报错：相对路径报错
话不多说先上图 俗话说:面向百度编程,这话是没错滴,找不到相同问题的博客至少你还可以找谷歌翻译 以上图片问题就是:你导入的组件的相对路径不对.(有可能是你手动敲进去的,然后vetur这边检测不到) 解 ...
- 使用weexplus + vue开发APP的填坑之旅
最近需要撸一个app来满足用户的需求,找来找去发现flutter不错,决定用它但是时间不够(准备挤出时间再去研究flutter),进度又催得紧,最后决定选weex这个上手快些,说干就干打开官网跟着ap ...
- 《Generative Adversarial Nets》论文精读
论文精读<Generative Adversarial Nets> 导言:生成模型是目前爆火的一个研究方向,据Microsoft对于ChatGPT-4的研究称"ChatGPT-4 ...