数据/组件绑定的各种情况

<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>