vue的常见v-指令

目录

• vue的常见v- :指令
  • 渲染控制
    • v-if
    • v-show
    • v-for
  • 数据绑定
    • v-bind（简写 :）
    • v-model:
  • 事件处理
    • v-on:（简写@）
    • 其他（了解）

vue的常见v- :指令

GJ504b最近要考web期末了，总结一下vue的常见v-指令

渲染控制

v-if

<!-- 条件为真时，渲染该元素（动态增删 DOM） -->
<div v-if="condition">内容</div>

<div v-if="type === 'admin'">管理员</div>
<div v-else-if="type === 'user'">普通用户</div>
<div v-else>游客</div>

v-show

<!-- 通过 CSS `display` 控制显示/隐藏（DOM 始终存在） -->
<div v-show="isVisible">内容</div>

v-for

列表渲染，循环遍历数组或对象，动态多次生成对应DOM

<!-- 格式 -->
<div v-for="(item, index) in items"></div>
<!-- 遍历数组
items：要遍历的数组
item：数组的当前元素
index：元素的索引（可选可省略） -->
<div v-for="(value, key) in object"></div>
<!-- 遍历对象
object：要遍历的对象
value：对象的属性值
key：对象的属性名
-->
<div v-for="(value, name, index) in object"></div>
<!-- 遍历对象
object：要遍历的对象
value：对象的属性值
name：对象的属性名
index：元素的索引（可选可省略） -->

<ul>
     <li v-for="item in items">{{ item }}</li>
</ul>
<!-- 其中 item 是数组元素的别名，items 是数据里的数组。 -->
<!-- 参数名可自定义（如 item 改 user，index 改 i），但顺序固定。 -->

数据绑定

这里所有的v-///* 后面都有冒号哦
v-xxxx:

v-bind（简写 :）

动态绑定HTML元素的属性（src，class，组件props）

<!-- 将 Vue 数据里的 imageSrc 变量值，赋值给 img 的 src 属性 -->
<img v-bind:src="imageSrc" /> 

<!-- 简写语法（: 是 v-bind 的缩写） -->
<img :src="imageSrc" /> 

<!-- 动态属性名 -->
<!-- key 是 Vue 里的变量，将button里的属性改成 value -->
<button :[key]="value"></button> 

<!-- 绑定 class 的对象 -->
<!-- 如果 isRed 为 true，则给 div 添加 'red' 类；为 false 则移除 -->
<div :class="{ red: isRed }"></div> 

v-model:

双向绑定：将html里的表单数据（input,select,textarea）和js数据绑定，双向同步化，

<p>Message is: {{ message }}</p>
 <input v-model="message" placeholder="edit me" />

事件处理

这里所有的v-///* 后面都有冒号哦
v-xxxx:

v-on:（简写@）

类似调⽤JS事件监听：对象名.addEventListener('事件类型',要执⾏的函数)

<button v-on:click = "函数名"></button>
<button @click = "函数名"></button>

其他（了解）