Vue入门第3天------模板语法（二）-蒲公英云

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

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

一、属性绑定

1.1 Vue如何动态处理属性

v-bind指令用法

跳转
缩写形式

跳转

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

<input v-bind:value='msg' v-on:input="msg=$event.target.value">

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

二、样式绑定

2.1 class样式处理

对象语法

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

例子：

<style>
            .active{ 
                border: 1px solid red;
                width: 100px;
                height: 100px;
            }
            .error{ 
                background-color:orange;
            }
        </style>
        <div id="app">
            <div v-bind:class="{active: isActive,error:isError}">
                测试样式
            </div>
            <button v-on:click="handle">切换</button>
        </div>
        <script src="js/vue.min.js"></script>
        <script>
            var vm = new Vue({ 
                el:'#app',
                data:{ 
                    isActive:true,
                    isError:true
                },
                methods:{ 
                    handle:function(){ 
                        //控制isActive值在true和false之间切换
                        this.isActive = !this.isActive;
                        this.isError = !this.isError;
                    }
                }
            })
        </script>

数组语法

active是类名，类名后加Class

例子：

<style>
            .active{ 
                border: 1px solid red;
                width: 100px;
                height: 100px;
            }
            .error{ 
                background-color:orange;
            }
        </style>
        <div id="app">
            <div v-bind:class="[activeClass,errorClass]">测试样式</div>
            <button v-on:click="handle">切换</button>
        </div>
        <script src="js/vue.min.js"></script>
        <script>
            var vm = new Vue({ 
                el:'#app',
                data:{ 
                    activeClass:'active',
                    errorClass:'error'
                },
                methods:{ 
                    handle:function(){ 
                        this.activeClass="";
                        this.errorClass="";
                    }
                }
            })
        </script>

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

对象绑定和数组绑定可以结合使用
class绑定的值可以简化操作（数组和对象）

//数组的简化操作

arrClasses:[‘active’,’error’],
//对象的简化操作

objClasses:{
```
        active:true,
        error:true
    }
```
默认的class会保留

.base{
```
    font-size: 28px;
}
```

在这里插入图片描述
注意：运行后会发现它有三个样式，有自己默认的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>