Vue入门第3天------模板语法（二）

男娘i 2023-07-10 12:39 45阅读 0赞

## 一、属性绑定 ##

**1.1 Vue如何动态处理属性**

*  v-bind指令用法

*  缩写形式

**1.2 v-model的底层实现原理分析**

> 注意：实际上底层原理就是  
> ：用v-bind来绑定value值，v-on:去绑定input标准事件，input这个事件用来监听输入域内容，当内容发生变化的时候，通过$event获取到输入域的最新的值，之后把最新的值赋值给原来的msg，从而实现了数据的更新，完成了双向数据绑定。但是实际开发中我们还是会使用v-model来实现双向绑定。

## 二、样式绑定 ##

**2.1 class样式处理**

*  对象语法

> 这里的active是类名，is后要加类名，并且isActive有两个取值：true、false

例子：

*  数组语法

> active是类名，类名后加Class

例子：

**2.2 class样式绑定相关语法细节**

1.  对象绑定和数组绑定可以结合使用

1.  class绑定的值可以简化操作（数组和对象）

//数组的简化操作
    <div v-bind:class="arrClasses"></div>
    arrClasses:['active','error'],
    //对象的简化操作
    <div v-bind:class="objClasses"></div>
    objClasses:{ 
    			active:true,
    			error:true
    		}

1.  默认的class会保留

.base{ 
    		font-size: 28px;
    	}
    <div class="base" v-bind:class="objClasses"></div>

![在这里插入图片描述][20200303151406279.png]  
*注意：运行后会发现它有三个样式，有自己默认的base，还有objClasses里面的两个样式。*

**2.3 style样式处理**

*  对象语法

*  数组语法

> style样式处理用法其实和刚才的class样式处理基本是一样的！

<div id="app">
    			<div v-bind:style="{border:borderStyle,width:widthStyle,height:heightStyle}"></div>
    			<div v-bind:style="objStyles"></div>
    			<div v-bind:style="[objStyles, overrideStyles]"></div>
    			<button v-on:click="handle">切换</button>
    		</div>
    		<script src="js/vue.min.js"></script>
    		<script>
    			var vm = new Vue({ 
    				el:'#app',
    				data:{ 
    					borderStyle:'1px solid pink',
    					widthStyle:'100px',
    					heightStyle:'200px',
    					objStyles:{ 
    						border:'1px solid green',
    						width:'200px',
    						height:'100px'
    					},
    					overrideStyles:{ 
    						border:'5px solid orange',
    						backgroundColor:'blue'
    					}
    				},
    				methods:{ 
    					handle:function(){ 
    						this.heightStyle='100px';
    						this.objStyles.width='100px';
    					}
    				}
    			})
    		</script>

[20200303151406279.png]: https://img-blog.csdnimg.cn/20200303151406279.png