Uniapp 是一个跨平台的开发框架,可以使用 Vue.js 语法进行开发。以下是 Uniapp 中常用的语法:
- 数据绑定:
使用双花括号({{}})绑定数据到模板中。
例如:
<template>
<div>
<div v-if="showMessage">{{message}}</div>
<div v-else>No message to show.</div>
</div>
</template>
<script>
export default {
data() {
return {
showMessage: true,
message: 'Hello Uniapp!'
}
}
}
</script>
- 条件渲染
使用 v-if 和 v-else 指令可以根据条件来渲染不同的内容。
例如:
<template>
<div>
<div v-if="showMessage">{{message}}</div>
<div v-else>No message to show.</div>
</div>
</template>
<script>
export default {
data() {
return {
showMessage: true,
message: 'Hello Uniapp!'
}
}
}
</script>
- 列表渲染:
使用 v-for 指令可以遍历数组或对象来渲染列表。
例如:
<template>
<ul>
<li v-for="(item, index) in items" :key="item.id">{{index + 1}}. {{item.name}}</li>
</ul>
</template>
<script>
export default {
data() {
return {
items: [
{id: 1, name: 'item 1'},
{id: 2, name: 'item 2'},
{id: 3, name: 'item 3'}
]
}
}
}
</script>
- 件绑定:
使用 v-on 指令绑定事件,可以监听用户的操作并触发对应的方法。
例如:
<template>
<button v-on:click="handleClick">Click me</button>
</template>
<script>
export default {
methods: {
handleClick() {
console.log('Button clicked')
}
}
}
</script>
- 样式绑定:
使用 v-bind:class 和 v-bind:style 指令可以动态绑定样式。
例如:
<template>
<div v-bind:class="{active: isActive}" v-bind:style="{fontSize: fontSize + 'px'}">Hello Uniapp</div>
</template>
<script>
export default {
data() {
return {
isActive: true,
fontSize: 16
}
}
}
</script>
以上是 Uniapp 中常用的语法,还有其他更高级的语法和 API 可以参考官方文档。