列举uniAPP 中常用的指令语句 ?

uni-app 基于 Vue.js 开发,因此它继承了 Vue.js 的指令系统。这些指令在 uni-app 开发中非常有用,可以用来进行数据绑定、事件处理等任务。以下是在 uni-app 中常用的一些指令语句:

v-bind

用于绑定属性到表达式,简写为 :。例如,动态绑定图片的 src

<img v-bind:src="imageSrc" />
<!-- 或简写为 -->
<img :src="imageSrc" />

v-model

用于在表单控件或者组件上创建双向数据绑定。例如,绑定输入框的值:

<input v-model="inputValue" />

v-for

用于基于源数据多次渲染元素或模板块。例如,遍历数组创建列表:

<ul>
  <li v-for="(item, index) in list" :key="index">{{ item }}</li>
</ul>

v-if、v-else-if、v-else

用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值时被渲染:

<div v-if="type === 'A'">Type A</div>
<div v-else-if="type === 'B'">Type B</div>
<div v-else>Type C</div>

v-show

另一种条件渲染指令,根据表达式之真假值,切换元素的 display CSS 属性:

<div v-show="isVisible">Hello!</div>

v-on

用于监听 DOM 事件,并在触发时执行一些 JavaScript 代码,简写为 @。例如,监听点击事件:

<button v-on:click="handleClick">Click me</button>
<!-- 或简写为 -->
<button @click="handleClick">Click me</button>

v-slot

用于提供具名插槽或默认插槽的内容,是 2.6.0+ 新增的指令,替代了 slotslot-scope

<template v-slot:header>
  <h1>Here might be a page title</h1>
</template>

这些指令提供了强大的模板编写能力,使得开发者可以更加灵活和高效地开发 uni-app 应用。

发表评论

后才能评论