精华内容
下载资源
问答
  • Vue.js 动态绑定CSS样式

    万次阅读 2018-07-30 15:54:23
    a c 代表CSS样式表里相应的样式名 b 代表true(启用此样式)/false(不启用此样式) html <!--vue-app是根容器--> <div id="vue-app"> <input type="button...

    第一种方法:

    v-bind:class="{a:b,c:b}"     a c 代表CSS样式表里相应的样式名       b 代表true(启用此样式)/false(不启用此样式)
    

    html

        <!--vue-app是根容器-->
        <div id="vue-app">
            <input type="button" v-on:click="a=!a" v-bind:class="{changeColor:a,changeWidth:a}" value="change!">
        </div>

      css

    .changeColor{
        background: brown;
        color: #ffffff;
    }
    .changeWidth{
        width: 200px;
    }

       js

    //实例化vue对象
    new Vue({
        el:"#vue-app",
        data:{
            a:false
        },
        methods:{},
        computed:{}
    });

    效果图

    点击按钮后

    再次点击按钮后将恢复到初始样子

     

    第二种方法

    html

        <!--vue-app是根容器-->
        <div id="vue-app">
            <input type="button" v-on:click="a=!a" v-bind:class="change" value="change">
        </div>

    css文件与上面一样
     

    JS

    //实例化vue对象
    new Vue({
        el:"#vue-app",
        data:{
            a:false
        },
        methods:{},
        computed:{
            change:function(){
                return {
                    changeColor:this.a,
                    changeWidth:this.a
                }
            }
        }
    });

    效果图与上面一样

     

    如果您有什么不明白的地方其它想问的可以关注我的公众号,给我留言,我会尽可能的帮您解决遇到的问题

    ps:如果您对摄影感兴趣,也可以关注我的公众号,不定时会分享自己的摄影经验调色设定,欢迎交流,哈哈哈哈哈

     

     

    展开全文
  • 主要介绍了Vue 框架之动态绑定 css 样式的方法,本文通过分享小实例给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • Vue 动态绑定CSS样式

    2021-04-14 15:55:02
    动态绑定CSS样式 绑定了changeColor样式,changeC是判断条件,根据条件changeC控制css加与不加 <div v-bind:class="{changeColor:changeC}" v-on:click="changeC=!changeC"> <span>示例一</span>...

    动态绑定CSS样式

    绑定了changeColor样式,changeC是判断条件,根据条件changeC控制css加与不加

    
    <div v-bind:class="{changeColor:changeC}" v-on:click="changeC=!changeC">
    	<span>示例一</span>
    </div>
    
    
    展开全文
  • VUE动态绑定Css样式、Style行内样式

    千次阅读 2020-08-15 14:42:20
    VUE动态绑定Css样式、Style样式 一、背景 这两天做的uniapp项目开发的时候遇到了动态写css样式的问题了,因为uniapp的语法是vue的语法,所以uniapp的样式问题主要也就是vue的样式问题,一直以来这一块自己也没有好好...

    VUE动态绑定Css样式、Style样式

    一、背景

    这两天做的uniapp项目开发的时候遇到了动态写css样式的问题了,因为uniapp的语法是vue的语法,所以uniapp的样式问题主要也就是vue的样式问题,一直以来这一块自己也没有好好的总结过,特此总结。

    二、栗子

    思路,主要是在data、methods、computed三个地方定义变量、方法或者计算属性来给出指定的背景。
    (1)css动态样式(data数据)

    <template>
    	<view>
    		<view :class="{bgOne:isCheck,bgTwo:!isCheck}">2323</view>
    		<button @click="changeBg">切换</button>
    	</view>
    </template>
    
    <script>
    	export default{
    		data(){
    			return{
    				isCheck:true
    			}
    		},
    		methods:{
    			changeBg(){//改变背景
    				this.isCheck = !this.isCheck
    			}
    		}
    	}
    </script>
    
    <style >
    	.bgOne{
    		background-color: red;
    	}
    	.bgTwo{
    		background-color: green;
    	}
    </style>
    

    在这里插入图片描述
    点击切换按钮切换背景
    (2)css动态样式(methods)

    <template>
    	<view>
    		<view v-for="(item,index) in ['A','B','C']" :class="{bgOne:selectBg(index),bgTwo:selectBg(index+1),bgThree:selectBg(index+2)}">{{item}}</view>
    	</view>
    </template>
    
    <script>
    	export default{
    		data(){
    			return{
    			
    			}
    		},
    		methods:{
    			selectBg(i){
    				if((i+1)%3==1){
    					return true
    				}else{
    					return false
    				}
    			}
    		}
    	}
    </script>
    
    <style >
    	.bgOne{
    		background-color: red;
    	}
    	.bgTwo{
    		background-color: green;
    	}
    	.bgThree{
    		background-color: blue;
    	}
    </style>
    

    效果展示:
    在这里插入图片描述
    (3)css动态样式(computed)

    <template>
    	<view>
    		<view :class="{bgOne:setBg}">2323</view>
    	</view>
    </template>
    
    <script>
    	export default{
    		data(){
    			return{
    			}
    		},
    		methods:{
    		},
    		computed:{
    			setBg(){
    				return true
    			}
    		}
    	}
    </script>
    
    <style >
    	.bgOne{
    		background-color: red;
    	}
    </style>
    

    在这里插入图片描述
    (4)行内style动态样式(data数据)

    <template>
    	<view>
    		<view :style="{backgroundColor:bgColor}">2323</view>
    		<button @click="changeBg">切换</button>
    	</view>
    </template>
    
    <script>
    	export default{
    		data(){
    			return{
    				bgColor:'green'
    			}
    		},
    		methods:{
    			changeBg(){//改变背景
    				this.bgColor= 'red'
    			}
    		}
    	}
    </script>
    
    <style >
    
    </style>
    

    在这里插入图片描述
    点击切换按钮切换背景
    (5)行内style动态样式(methods)

    <template>
    	<view>
    		<view v-for="(item,index) in ['A','B','C']" :style="{backgroundColor:selectBg(index)}">{{item}}</view>
    	</view>
    </template>
    
    <script>
    	export default{
    		data(){
    			return{
    			
    			}
    		},
    		methods:{
    			selectBg(i){
    				if((i+1)%3==1){
    					return 'red'
    				}else if((i+1)%3==2){
    					return 'green'
    				}else{
    					return 'blue'
    				}
    			}
    		}
    	}
    </script>
    
    <style >
    
    </style>
    

    效果展示:
    在这里插入图片描述
    (6)行内style动态样式(computed)

    <template>
    	<view>
    		<view :style="{backgroundColor:bgColor}">2234</view>
    	</view>
    </template>
    
    <script>
    	export default{
    		data(){
    			return{
    			
    			}
    		},
    		computed:{
    			bgColor(){
    				return 'green'
    			}
    		}
    	}
    </script>
    
    <style >
    
    </style>
    

    在这里插入图片描述

    三、总结

    (1)加bind的符号“:”
    (2)

    展开全文
  • Vue 框架-05-动态绑定 css 样式

    千次阅读 2018-11-13 23:45:13
    Vue 框架-05-动态绑定 css 样式 今天的小实例是关于 Vue 框架动态绑定 css 样式,这也是非常常用的一个部分 首先说一下 动态绑定,相对的大家都知道静态绑定,静态绑定的话,直接加 class=“”就可以了,使用 Vue 呢...

    Vue 框架-05-动态绑定 css 样式

    今天的小实例是关于 Vue 框架动态绑定 css 样式,这也是非常常用的一个部分

    首先说一下 动态绑定,相对的大家都知道静态绑定,静态绑定的话,直接加 class=“”就可以了,使用 Vue 呢之前也介绍过一个 v-bing:class="{{redClass:true}}" ,也可以实现绑定,但都不是动态绑定,动态绑定肯定是根据用户的某个操作实现动态的修改样式

    先看下面的第一个小实例:

    在这里插入图片描述

    源代码 html 文件:
    请看注释

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title>VueLearn-cnblogs/xpwi</title>
    		<!--引入自定义的样式-->
    		<link rel="stylesheet" href="css/style.css" />
    		<!--引入 vue 核心 js-->
    		<script type="text/javascript" src="js/vue.js" ></script>
    		
    	</head>
    	<body>
    		
    		<!--vue-app 是根容器,定义一个 id,然后在 js 里操作-->
    		<div id="vue-app">
    			<h2>动态绑定 css 样式</h2>
    			
    			<!--Vue 中绑定 class,使用的是 json 对象,类名:布尔值
    			然后我们可以通过修改 布尔值来实现修改样式-->
    			<h3 v-bind:class="{red:true}">实例1</h3>
    			<h3>实例2</h3>
    			
    			
    		</div>
    		
    		<!--引入自己的 js,注意必须写在 body 标签里最后,因为必须先加载你的整个 HTML DOM,才回去执行 vue 实例-->
    		<script type="text/javascript" src="js/computed.js" ></script>
    	</body>
    </html>
    
    

    源代码 css 文件:

    .red{
    	color: red;
    }
    
    .change{
    	background-color: yellow;
    }
    

    第二个小实例:
    实现,鼠标放上去,修改背景色

    在这里插入图片描述

    源代码 html 文件:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title>VueLearn-cnblogs/xpwi</title>
    		<!--引入自定义的样式-->
    		<link rel="stylesheet" href="css/style.css" />
    		<!--引入 vue 核心 js-->
    		<script type="text/javascript" src="js/vue.js" ></script>
    		
    	</head>
    	<body>
    		
    		<!--vue-app 是根容器,定义一个 id,然后在 js 里操作-->
    		<div id="vue-app">
    			<h2>动态绑定 css 样式</h2>
    			
    			<!--Vue 中绑定 class,使用的是 json 对象,类名:布尔值
    			然后我们可以通过修改 布尔值来实现修改样式-->
    			<!--dataRed,dataChange是布尔值,定义在js 文件中-->
    			<h3 v-on:mouseover="dataChange=!dataChange" v-on:mouseout="dataChange=!dataChange" v-bind:class="{red:dataRed,change:dataChange}">实例1</h3>
    			<h3>实例2</h3>
    			
    			
    		</div>
    		
    		<!--引入自己的 js,注意必须写在 body 标签里最后,因为必须先加载你的整个 HTML DOM,才回去执行 vue 实例-->
    		<script type="text/javascript" src="js/css.js" ></script>
    	</body>
    </html>
    
    

    源代码 js 文件:

    //实例化 vue 对象
    new Vue({
    	//注意代码格式
    	
    	//el:element 需要获取的元素,一定是 html 中的根容器元素
    	el:"#vue-app",
    	data:{
    	    
    		dataRed : true,
    		dataChange : false
    	},
    	methods:{
    	
    	}
    
    });
    

    源代码 css 文件:

    .red{
    	color: red;
    }
    .change{
    	background-color: yellow;
    }
    

    上面的动态,大家可以看到是通过修改样式的 打开和关闭

    实例二:

    在这里插入图片描述

    源代码 html 文件:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title>VueLearn-cnblogs/xpwi</title>
    		<!--引入自定义的样式-->
    		<link rel="stylesheet" href="css/style.css" />
    		<!--引入 vue 核心 js-->
    		<script type="text/javascript" src="js/vue.js" ></script>
    		
    	</head>
    	<body>
    		
    		<!--vue-app 是根容器,定义一个 id,然后在 js 里操作-->
    		<div id="vue-app">
    			<h2>动态绑定 css 样式</h2>
    			
    			<!--Vue 中绑定 class,使用的是 json 对象,类名:布尔值
    			然后我们可以通过修改 布尔值来实现修改样式-->
    			<!--dataRed,dataChange是布尔值,定义在js 文件中-->
    			<h3 v-on:mouseover="dataChange=!dataChange" v-on:mouseout="dataChange=!dataChange" v-bind:class="{red:dataRed,change:dataChange}">实例1</h3>
    			
    			<h3 v-on:mouseover="changeHeight=!changeHeight" v-on:mouseout="changeHeight=!changeHeight" v-bind:class="{yellowBG:true,changeHeight:changeHeight}">实例2</h3>
    			
    			
    		</div>
    		
    		<!--引入自己的 js,注意必须写在 body 标签里最后,因为必须先加载你的整个 HTML DOM,才回去执行 vue 实例-->
    		<script type="text/javascript" src="js/css.js" ></script>
    	</body>
    </html>
    
    

    源代码 js 文件:

    //实例化 vue 对象
    new Vue({
    	//注意代码格式
    	
    	//el:element 需要获取的元素,一定是 html 中的根容器元素
    	el:"#vue-app",
    	data:{
    		dataRed : true,
    		dataChange : false,
    		changeHeight : false
    	},
    	methods:{
    	
    	}
    
    });
    

    源代码 css 文件:

    .red{
    	color: red;
    }
    
    .change{
    	background-color: yellow;
    }
    
    .yellowBG{
    	width: 20%;
    	background-color: yellow;
    }
    
    .changeHeight{
    	width: 20%;
    	height:100px
    }
    
    

    更多文章:

    展开全文
  • P3vue动态绑定css样式 https://www.bilibili.com/video/av91679349?p=3
  • Vue-动态绑定CSS样式

    2019-05-07 09:49:26
    在这一片博客里面主要讲解了如何通过@:click也就是(v-on:click)来绑定css样式进行动态控制 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>...
  • 实现绑定css样式的方法: 在data中设定一个值,比如changColor:false,然后就可以在容器中添加入下命令: 意思是点击这个div盒子后,里面的class就会显示出来,然后颜色就会变成你设定的,再次点击就还原 <...
  • Vue---动态绑定CSS样式

    2020-05-23 12:28:36
    标题Vue之动态绑定CSS样式 效果图: 代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> *{ margin: 0; ...
  • Vue Html标签绑定 css 样式 外联式 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;utf-8&quot;&amp;gt; &...
  • 在Angular中利用相关指令同样可以完成CSS类绑定CSS样式绑定 2 内置指令  在angular中指令是作用在特定的DOM元素上的,目的是用来扩展元素的功能,为元素添加新的功能;angular框架本身提供的指令就叫做内置...
  • 动态绑定CSS样式 v-bind:class="{ active: isActive }" 官方文档地址:https://cn.vuejs.org/v2/guide/class-and-style.html <!--绑定了changeColor样式,changeC默认为false,单击变非--> <div v-...
  • vue动态绑定css样式

    2019-11-12 23:18:20
    <div v-bind:style="{ margin: mt }" ​​​​></div> data{ return{ mt :"150px 0 0" } }
  • vus.js动态绑定css样式

    2021-04-11 10:36:40
    首先,要知道vuejs动态绑定需要用到哪个属性,即v-bind:class这个值,下面我们来看看具体代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue.js 学习<...
  • uni-app动态绑定css样式的width

    万次阅读 2019-09-24 15:56:17
    uni-app动态绑定width 需求描述 做的项目需要实现一个类似table的功能,但是由于表格的内容不是固定的,如果把css的width写死,就可能导致内容太长而无法全部显示。 解决需求 要解决上述问题就需要动态的改变width ...
  • <div class="flex-lay" style="color:#999"> <div bindtap="changeType(1)" class="nav" :class="{'nav-active' : active == 1}">日报</div> ...div bindtap="changeType(2)" c...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,811
精华内容 724
关键字:

绑定css样式