Vue基础

Vue基础

class的绑定**

1.1 对象形式

实例

<div :class = '{ "size": true , "bg": true }'></div>
<div :class = '{ size: true , "bg": true }'></div>
<div :class = '{ size: f , "bg": f }'></div>
<div :class = '{ size: "5>3" , "bg": f }'></div>
<div :class = '{ size: fn() , "bg": f }'></div>

：

介绍：

对象形式里面支持变量，字符串，函数名（调用），表达式等等js语法。

补充修改：

对象中的key如（size）带不带引号都是原样输出size，没有变量一说

1.2 数组形式

实例：

//模板的语法格式 
<div :class = '["size","bg"]'></div>
<div :class = '[size,bg]'></div> 
<div :class = '[f?size:"",bg]'></div> 
<div :class = '[classAdd(),bg]'></div> 
//Vue的实例配置 
new Vue({  
	el: '#app',   
	data: {     
	f: true,   
	size: "size",  
	bg: "bg"     
	},   
	methods: {  
	fn(){    
	return 5>3  
	},  
	classAdd(){   
	return f? this.size : ""  
	}  
	}  
}) 

介绍：

数组形式同理对象形式，里面支持变量，字符串，函数名（调用），表达式等等js语法。

补充修改：

对象中的key如（size）带不带引号都是原样输出size，没有变量一说

1.3 class绑定总结

对象形式较数组形式而已，比较复杂，所以推荐在项目中使用数组的形式来进行class的绑定。

style的绑定

2.1 对象形式

实例：

<div :style = "{'width':'100px','height':'100px','background':'red'}" ></div>
<div :style="{
      width:size,'height':size,'background':color}"></div>

介绍：

对象形式里面支持变量，字符串，函数名（调用），表达式等等js语法。

样式是以键值对的形式展现的。

补充修改：

对象中的key如（size）带不带引号都是原样输出sizeÿ