列举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+ 新增的指令,替代了 slot
和 slot-scope
:
<template v-slot:header>
<h1>Here might be a page title</h1>
</template>
这些指令提供了强大的模板编写能力,使得开发者可以更加灵活和高效地开发 uni-app 应用。