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 ...
随机推荐
- Python_15 ddt驱动与日志
一.查缺补漏 1. 在测试报告中添加注释,写在类名下面就行,方法名下面,三引号 2. 直接import ddt引用的时候需要ddt.ddt, ddt.data, ddt.unpack from ddt ...
- 【解决方法】查找比较组时报错：An object (User, Group, or Built-in security principal) with the following nameca..
目录-快速跳转 问题描述 原因分析: 解决方案: 附言: 问题描述 操作环境与场景: 在 VM 内 Windows 2019 中,在组策略管理中,对GPO进行组查找时报错: An object (Us ...
- AWS CLI入门教程(亲测）
背景 因为公司有用到S3,所以整理了一个S3的简单入门教程.当然,入门之后有其他更高级的用法需求,就靠自己去查文档了.入门的教程能让你快速上手,不至于翻阅一堆文档,容易被劝退.这里主要是介绍如何用cl ...
- Prism Sample 7 Modules LoadManual
这种模块是手动载入的,需要的时候手动加载. 在app.xaml.cs中注册为按需加载,代码 protected override void ConfigureModuleCatalog(IModule ...
- vue 事件中的 .native你搞清楚了吗
native是什么? .native - 监听组件根元素的原生事件. 主要是给自定义的组件添加原生事件. 官网的解释: 你可能想在某个组件的根元素上监听一个原生事件.可以使用 v-on 的修饰符 .n ...
- laravel ServiceProvider 服务提供者使用案例
1. 实例化一个类 2.全局注册这个类 3.在控制器中使用 public function register() { $this->app->singleton('wxminapp', f ...
- 【GiraKoo】线程本地存储（Thread Local Storage, TLS）
[技术分享]线程本地存储(Thread Local Storage, TLS) 在项目开发中,遇到了关于TLS相关的问题.为了了解该机制的用途,在微软的官网查找了一些资料. 本文参考官方文档, 简单介 ...
- 从 DevOps 到平台工程：软件开发的新范式
DevOps 是一种将开发和运营结合起来的方法,在应用规划.开发.交付和运营方面将人员.流程和技术结合起来.DevOps 使以前孤立的角色(如开发.IT运营.质量工程和安全)之间进行协调和合作.一直以 ...
- JSPModel
JSPModel what JSP开发模型就是JSP Model,是用JSP语言写的 why 为了更好地使用jsp技术开发 How JSPModel1 Why 因为在jsp开发中,包含了数据处理/业务 ...
- C#设计模式19——装饰器模式的写法
装饰器模式(Decorator Pattern)是一种结构型设计模式,它允许你动态地给一个对象添加一些额外的职责,而不需要修改这个对象的代码. What(什么) 装饰器模式是一种结构型设计模式,它允许 ...