精华内容
下载资源
问答
  • 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样式

    千次阅读 2019-08-15 00:05:06
  • 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)

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

    P3vue动态绑定css样式

    https://www.bilibili.com/video/av91679349?p=3

    展开全文
  • vue动态绑定css样式和class名

    千次阅读 2019-12-27 10:18:05
    有的时候,需要根据后端传来的不同的值来写不同的样式,我的需求是在一个页面有一个评分,传给后台,在另一个页面获取传的这个值,根据这个值来判断哪个选项加粗。 代码: <tr> <td class="bigT " ...
  • 今天的小实例是关于 Vue 框架动态绑定 css 样式,这也是非常常用的一个部分首先说一下 动态绑定,相对的大家都知道静态绑定,静态绑定的话,直接加 class=“”就可以了,使用 Vue 呢之前也介绍过一个v-bing:class="{...
  • 主要介绍了Vue 框架之动态绑定 css 样式的方法,本文通过分享小实例给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 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>...
  • Vue.js 动态CSS Class 实例2change colorchange lengthaaajsnew Vue({el:"#vue-app",data:{changColor:false,changLength:false,},methods:{},computed:{compClasses:function(){return {changColor:this.changColor...
  • Vue.js 动态绑定CSS样式

    万次阅读 2018-07-30 15:54:23
    a c 代表CSS样式表里相应的样式名 b 代表true(启用此样式)/false(不启用此样式) html &lt;!--vue-app是根容器--&gt; &lt;div id="vue-app"&gt; &lt;input type="button...
  • 标签绑定class属性:v-bind:class="{changeColor: true}" 注意里面的写法是对象的形式 html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Vue.js...
  • Vue动态绑定CSS样式

    2019-02-12 11:31:00
    动态绑定CSS样式 h2 > 19 < div > 20 < h4 > 示例一 h4 > 21 < div v-on:click ="varChangeColor = !varChangeColor" v-bind:class ="{changeColor:varChangeColor}" > 22 < span > 点击切换...
  • Vue 框架-05-动态绑定 css 样式

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

    2020-05-23 12:28:36
    标题Vue动态绑定CSS样式 效果图: 代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> *{ margin: 0; ...
  • 实现绑定css样式的方法: 在data中设定一个值,比如changColor:false,然后就可以在容器中添加入下命令: 意思是点击这个div盒子后,里面的class就会显示出来,然后颜色就会变成你设定的,再次点击就还原 <...
  • <ul> <li v-for="(item,index) in icon_list" :key="index" @click="changeClass(index,item.path)"> <router-link :to="item.path" :class="{ 'active-class': nowIndex === index }">...
  • vue动态绑定Class样式

    2020-10-24 10:26:05
    --vue代码--> <ul> <li v-for="item in itemData" :key="item"> <i :class="item.isA ? 'class_a' : 'class_b'"></i> </li> </ul> <!-- CSS代码 --> .class_...
  • 学习VUE2.0,想尝试做个在表格中,选中不同的列,将该列设置一个CSS。但是不成功。请赐教~~非常感谢!先上代码html代码操作IDNameEmail{{list.id}}{{list.name}}{{list.email}}js代码let listTemplate={'list|1-10':...
  • 在项目中,我们时常会遇到动态的去绑定操作切换不同的CSS样式,结合自身项目中遇到的一些情况,也参考了一些文档,针对vue.js样式的动态绑定切换做出如下小结:动态切换的核心思想:利用vue指令v-bind来实现动态绑定...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 22,395
精华内容 8,958
关键字:

vue动态绑定css样式

vue 订阅