vue学习--模板语法(四、属性样式绑定&流程语句)

合集 - Vue学习(5)

1.vue学习--模板语法(一、概述&基本使用)2022-09-152.vue学习--模板语法(二、指令&数据绑定)2022-09-153.vue学习--模板语法(三、事件绑定)2022-09-15

4.vue学习--模板语法(四、属性样式绑定&流程语句)2024-05-09

5.vue学习--模板语法(五、选项卡案例)2024-05-09

收起

3.5 属性绑定

1.Vue如何动态处理属性？

• v-bind 指令用法

<a v-bind:href='url'>跳转</a>

• 缩写形式

<a :href='url'>跳转</a>

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

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

3.6 样式处理

1.class样式处理

• 对象语法

<div v-bind:class="{active:isActive}"></div>

• 数组语法

<div v-bind:class="{activeClass,errorClass}"></div>

2.style样式处理

• 对象语法

<div v-bind:style="{color:activeColor,fontSize:fontSize}"></div>

• 数组语法

<div v-bind:style="{baseStyles,overridingStyles}"></div>

3.7 分支循环结构

1.分支结构

• v-if
• v-else
• v-else-if
• v-show

<div v-if = 'score>=90'>及格</div>
<div v-else>不及格</div>

2.v-if与v-show区别

• v-if 控制元素是否渲染到页面
• v-show 控制元素是否显示（已经渲染到了页面）

3.循环结构

• v-for 遍历数组

<li v-for='item in list'>{{item}}</div>
<li v-for='{item,index} in list'>{{item}}+'---'+{{index}}</div>

• key的作用：帮助Vue区分不同元素，从而提高性能

<li :key='item.id' v-for='{item,index} in list'>{{item}}+'---'+{{index}}</div>

• v-for 遍历对象

<div v-for='{value, key, index} in object'>{{item}}</div>

• v-if和v-for结合使用

<div v-if='value==12' v-for='{value, key, index} in object'>{{item}}</div>