vue v-bind添加类名、style属性、动态参数

本是古典何须时尚 2021-07-24 13:48 363阅读 0赞

(1)v-bind添加类名
    	css定义好后,需要在data中声明后才能绑定
    	
    	1、通过v-bind:class='xx'标签添加类,可通过如下形式,动态改变添加的类名是否存在,即'对象'
    
    		1、:class='{类名:布尔值}'
    
    		2、:class='[类名1,类名2]' 
    			(1)此方法需先在data中声明类名和类名对应的值
    			(2)[]内还可以写三元运算符来判断添加类名
    			(3)[]内还可以嵌套{},按照[{类名:布尔值},类名]的形式实现添加类名
    
    	2、多个类名用,号隔开
    		
    		:class='{类名:布尔值,类名:布尔值}'
    		:class='[类名,类名]'
    
    	3、将类名通过data内属性添加(本质是:class='{对象}/[数组]')
    
    		(1)在data中定义好这个对象
    			cssObj:{c1:布尔值,c2:布尔值,...}
    		(2)在标签中引入对象
    			<p :class='cssObj'></p>
    
    	4、数组添加和对象添加区别
    		(1)数组中的类名可以是变量
    		(2)对象中的类名如果是变量,则添加后不可改变,即改变变量不会改变类名,即只接收死字符串
    		(3)数组的类名接收字符串拼接,对象中的类名不接受
    
    (2)v-bind在标签添加style写样式
    
    	在标签中
    		:style="{对象形式的键值对}"
    		
    		(1)使用当前方法添加带有浏览器引擎的样式时,vue会自动添加
    		(2)使用变量需要拼接字符串
    			如:"{border:变量+'px'}"
    		(3)传入数组
    			arr=[{键值对},{键值对}]
    			:style='arr'
    	   	(4)提供一个包含多个值的数组,常用于提供多个带前缀的值,只会渲染数组中最后一个被浏览器支持的值
    	   		<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>
    	   			如果浏览器支持不带浏览器前缀的flexbox,那么就只会渲染display:flex
    	 
    (3)v-bind动态参数:
    	<a :[变量]="url"> ... </a>
    		若变量=href,则等价于 <a href='url'>...</a>
    		
    		变量命名规范:
    			1、不能使用字符串拼接
    			2、变量中的大小字母会被转换成小写字母
    
    (4).sync语法糖,会扩展成一个更新父组件绑定值的v-on侦听器。
    	父组件:<xx  :msg.sync='变量'></xx>
    		若传递对象的所有属性
    			<xx  v-bind.sync='对象'></xx>
    			对象中的每一个属性都作为一个独立的 prop 传进去,然后各自监听
    			对象不能是一个字符串常量,例如 v-bind.sync=”{ title: doc.title }”错误
    			
    	子组件:this.$emit('update:msg',值)
    		加.sync:对应父组件驼峰变量
    		不加.sync:对应父组件x-xx格式的变量

代码示例:

<template lang='html'>
    	<div :class='{d1:flag,d2:flag2}'>
    		哈哈
    
    		<div :class='cssObj'>哈哈哈</div>
    		<button @click='change'>改变样式</button>
    
    		<div :class='[b1,b2]'>哈哈哈哈</div>
    
    		<div :class='[true?b1:b2]'>哈哈哈哈哈</div>
    
    		<div :class="[{b1:flag},b2]">哈哈哈哈哈哈</div>
    
    		<div :style="{color :'pink'}">哈哈哈哈哈哈哈</div>
    
    	</div>
    
    </template>
    
    <script>
    export default{ 
    	name:'vuedemo',
    	data()
    	{ 
    		return{ 
    			msg:'hello world',
    			d1:'d1',
    			flag:true,
    			flag2:false,
    			cssObj:{ c1:true,c2:false},
    			b1:'b1',
    			b2:'b2'
    		}
    	},
    	//计算属性
    	computed:{ 
    	//如果数据未被改变,则只会一次
    		getMsg()
    		{ 
    			this.flag=false;
    		}
    	},
    	methods:{ 
    		change()
    		{ 
    			this.flag=false;
    		}
    	}
    	
    }
    </script>
    
    <style lang='css'>
    .d1{ 
    	color:red;
    }
    .d2{ 
    	font-size:30px;
    }
    </style>