<template>
<div class="wrapper">
<!-- 数据绑定 -->
<text class="title">数据绑定:{{ title }}</text>
<!-- 事件绑定 -->
<text @click="press" class="bt">事件绑定:{{ click }}</text>
<!-- 列表渲染 -->
<div>
<!-- tid="uniqueId"表示使用数组list的数组元素$item.uniqueId作为数组元素的唯一 Id,且必须保证 uniqueId 这个属性值在每个数组元素都不一样。 -->
<div for="{{list}}" tid="uniqueId">
<!-- <text>{{$idx}}</text> -->
<text>列表渲染{{ $item.uniqueId }}</text>
</div>
</div>
<!-- 条件渲染 if-->
<div>
<text if="{{display}}">Hello-1</text>
<text elif="{{display}}">Hello-2</text>
<text else>条件渲染 if else</text>
</div>
<!-- 条件渲染 show-->
<text show="{{visible}}">条件渲染 show</text>
<!-- 逻辑控制块 -->
<div>
<list class="ljk">
<text>逻辑块控制:</text>
<block for="cities">
<list-item type="city">
<text style="color:#faf8fc">{{ $item.name }}</text>
</list-item>
<list-item type="spot" for="$item.spots">
<text>{{ $item.address }}</text>
</list-item>
</block>
</list>
</div>
<!-- 引入自定义组件 -->
<div>
</div>
<!-- 动态组件 -->
<div>
</div>
<!-- 过滤组件 -->
<div>
<text>{{ message | capitalize('11','22','33') }}</text>
</div>
</div>
</template>
<script>
export default {
data: {
title: "欢迎体验快应用",
click:'123456',
list: [
{
uniqueId: 1
},
{
uniqueId: 2
},
{
uniqueId: 3
},
{
uniqueId: 4
}
],
display: false,
visible: true,
cities: [
{
name: '北京',
spots: [
{
address: '北京市朝阳区'
}
]
},
{
name: '上海',
spots: [
{
address: '上海迪士尼乐园'
},
{
address: '上海博物馆'
},
{
address: '上海琉璃艺术博物馆'
},
{
address: '南京路步行街'
}
]
}
],
message: '过滤组件',
},
capitalize(value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
},
props: [],
onInit() {},
press(e) {
this.click = 'Hello'
}
}
</script>
<style>
.wrapper {
flex-direction: column;
}
.bt{
width: 100px;
height: 100px;
color: #0000ff;
}
.ljk{
background-color: #cccccc;
height: 160px;
}
</style>
数据/组件绑定的各种情况
最新推荐文章于 2022-10-09 14:36:43 发布