精华内容
下载资源
问答
  • vue动态绑定css样式和class名

    千次阅读 2019-12-27 10:18:05
    绑定class也差不多 : class = "{ 'active': isActive, 'sort': isSort }" data ( ) { return { isActive : true , isSort : false } } , 也可以这样 : class = "classObject" data ( ) ...

    有的时候,需要根据后端传来的不同的值来写不同的样式,我的需求是在一个页面有一个评分,传给后台,在另一个页面获取传的这个值,根据这个值来判断哪个选项加粗。
    在这里插入图片描述
    代码:

    <tr>
                             <td class="bigT  " colspan="6" style="font-size: 17px;font-weight: bold">一、老师总评:</td>
                             <td class="bigT1 "  colspan="24" style="font-size: 17px">
                                 <span v-for="(item,index) in overall"  key="item.value" 
                                       :style="item.value==ruleForm.overallRating? style1:''">{{item.label}}</span>
                             </td>
                         </tr>
    先在data写个数组,v-for循环,ruleForm.overallRating是从后台取的值,判断是否相等,再在data里写个style样式
    data() {
      return {
        overall:[
                    {value:0,label:"优秀"},
                    {value:1,label:"良好"},
                    {value:2,label:"及格"},
                    {value:3,label:"不及格"},
                ],
    	style1:{
                    'font-weight':"bold",
                    'font-size':18+"px"
                },
      }
    }
    
    

    绑定class也差不多

    :class="{ 'active': isActive, 'sort': isSort }"
    data() {
      return {
        isActive: true,
        isSort: false
      }
    },
    也可以这样
    :class="classObject"
    data() {
      return {
        classObject:{ active: true, sort:false }
      }
    }
    或者
    :class="[isActive?'active':'']"
    data() {
      return {
        isActive: true
      }
    },
    又或者这样
    :class="[isActive,isSort]"
    data() {
      return{
        isActive:'active',
        isSort:'sort'
     }
    }
    

    希望对你有帮助!

    展开全文
  • 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)

    展开全文
  • Vue动态绑定CSS

    千次阅读 2019-05-10 15:26:08
    操作元素的 class 列表和内联样式是数据绑定...因此,在将v-bind用于class和style时,Vue.js 做了专门的增强。表达式结果的类型除了字符串之外,还可以是对象或数组。 下面介绍绑定html class中的对象语法 <di...
  • 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...
  • Vue-动态绑定CSS样式

    2019-05-14 16:28:05
    动态 CSS Class < / h1 > < h2 > 实例 1 < / h2 > < ! -- < div v - on : click = "changeColor=!changeColor" v - bind : class = "{changeColor:changeColor}" > -- > < ! -- < span > Henry < / ...
  • 今天的小实例是关于 Vue 框架动态绑定 css 样式,这也是非常常用的一个部分 首先说一下 动态绑定,相对的大家都知道静态绑定,静态绑定的话,直接加 class=“”就可以了,使用 Vue 呢之前也介绍过一个 v-bing:class=...
  • Vue 框架-05-动态绑定 css 样式

    千次阅读 2018-11-13 23:45:13
    Vue 框架-05-动态绑定 css 样式 今天的小实例是关于 Vue 框架动态绑定 css 样式,这也是非常常用的一个部分 首先说一下 动态绑定,相对的大家都知道静态绑定,静态绑定的话,直接加 class=“”就可以了,使用 Vue 呢...
  • 这个小技巧在工作当中是非常实用而且经常用到的 希望小伙伴儿们能学到。 先看看效果图吧 ...在css中设置我们当前选中项为active的类名,并给与一个白色的背景颜色 .active { background: #fff
  • vue样式动态绑定

    2019-02-22 16:49:14
    v-on 简写: :class string [] 数组中可以是变量也可以是string 会将数组中的",“去除后渲染在dom object {} 将 key 作为class 渲染在dom上 :attr string [] 不会去除”," {} 显示 object ...
  • P3vue动态绑定css样式 https://www.bilibili.com/video/av91679349?p=3
  • 诸如在css中,我们添加鼠标滑入滑出效果添加不同的样式。 诸如在js中,我们根据某个条件,或者触发某个方法,去动态改变某个样式。 那么,在vue中,我们更能很轻松的达到这点。 看下常见的几种情景: 情景一:我们...
  • 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动态绑定多个样式

    千次阅读 2019-12-25 14:21:18
    vue动态绑定多个样式 在项目开发的过程中遇到这样一个需求:有一个节点的状态的显示,使用了element的时间线的组件,但是这个节点的状态有十几种,不同的状态有不同的显示方式,也就是说动态绑定样式。 1、一开始的...
  • 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_...
  • :class="[‘text-uppercase text-center’,{‘category-active’:categoryFlag }]
  • <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动态绑定背景图backgroundImage

    千次阅读 2020-06-11 12:51:56
    今天刚好用到,百度了一下用了这个方法写了出来 <div v-for="(item,index) in backList" :key="index" :style="{backgroundImage:'url('+item.imge+')'}" > </div>... imge: require('.
  • vue动态绑定类名的几种方法

    千次阅读 2019-07-26 14:47:33
    一、class的绑定 单个判断推荐1,两个条件动态切换推荐5,多个推荐4 ...根据isActive的true,false变化,动态绑定单个class <div :class="{ active: isActive==true }"></div> 2.你可以在对象中传入更...
  • vue 动态绑定设置元素style 颜色样式

    万次阅读 2019-07-17 13:48:51
    如修改一个按钮的颜色 ,'padding':'7px'}"> 设置 colorConfirm 的值为需要的颜色样式值  :style="{'background': colorConfirm ,'padding':'7px'}" ...的值动态绑定按钮的颜色值,其他属性亦可
  • Vue动态添加css

    千次阅读 2018-08-03 17:23:29
    第一步:在元素中绑定动态样式 1.添加单个样式 &lt;div class="addInvTitle" :class="lightBlue"&gt; 2.添加多个样式 &lt;div id="addInvite" class="addInvite...
  • Vue动态绑定样式

    2019-10-14 20:48:52
    Vue动态绑定样式——class 1.对象语法 { className:数据模型 } <div :class="{myclass1:show}" id="ss"></div> <script> let vm = new Vue({ el: "#ss", data: { ...
  • vue动态切换css

    千次阅读 2020-08-11 14:58:08
    vue通过class与style绑定动态切换css 我们可以传给 v-bind:class 一个对象,以动态地切换 class: <div v-bind:class="{ active: isActive }"></div> 上面的语法表示 active 这个 class 存在与否将取...
  • this.SelectedLi=index console.log(this.SelectedLi===index) } } } ​ CSS代码: 在这之前我还给li标签设置了color样式和border-bottom样式,问题就出在这里,先加的样式不会被后加的样式覆盖,所以再绑定这个...
  • VUE项目中CSS设置动态宽度的方法

    千次阅读 2020-07-15 11:13:06
    首先你务必看Vue的官方文档。涉及到的基础知识有: 绑定内联样式的使用 computed的使用 文档写的都是基础使用。那么在项目实战中如何使用,2步就能实现,下面提供一个参考方案: 需求场景:获取当前手机屏幕高度,...
  • 现在很多网站,都是希望动态切换class,更换css样式。下面我们使用Vue的v-bind绑定class v-bind动态绑定class 对象语法绑定(常用) red和size的值为true就在class显示red和size,false就不显示。下面有两种写法: ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 42,335
精华内容 16,934
关键字:

vue动态绑定css

vue 订阅