Various situations of data / component binding

<template>
  <div class="wrapper">
    <!--  Data binding  -->
    <text class="title"> Data binding ：{
    {
     title }}</text>

    <!--  Event binding  -->
    <text @click="press" class="bt"> Event binding ：{
    {
     click }}</text>

    <!--  The list of rendering  -->
    <div>
      <!-- tid="uniqueId" Indicates the use of an array list Array elements of $item.uniqueId As the only element of the array  Id, And must guarantee  uniqueId  The value of this attribute is different in each array element . -->
      <div for="{
    {list}}" tid="uniqueId">
        <!-- <text>{
    {
    $idx}}</text> -->
        <text> The list of rendering {
    {
     $item.uniqueId }}</text>
      </div>
    </div>

    <!--  Conditions apply colours to a drawing  if-->
    <div>
      <text if="{
    {display}}">Hello-1</text>
      <text elif="{
    {display}}">Hello-2</text>
      <text else> Conditions apply colours to a drawing  if else</text>
    </div>
    <!--  Conditions apply colours to a drawing  show-->
    <text show="{
    {visible}}"> Conditions apply colours to a drawing  show</text>
    <!--  Logic control block  -->
    <div>
      <list class="ljk">
        <text> Logic block control ：</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>
    <!--  Introduce custom components  -->
    <div>
    
    </div>
    <!--  Dynamic components  -->
    <div>
    
    </div>
    <!--  Filter components  -->
    <div>
      <text>{
    {
     message | capitalize('11','22','33') }}</text>
    </div>

  </div>
</template>

<script>
export default {
    
  data: {
    
    title: " Welcome to experience fast application ",
    click:'123456',
    list: [
      {
    
        uniqueId: 1
      },
      {
    
        uniqueId: 2
      },
      {
    
        uniqueId: 3
      },
      {
    
        uniqueId: 4
      }
    ],
    display: false,
    visible: true,
    cities: [
        {
    
          name: ' Beijing ',
          spots: [
            {
    
              address: ' Chaoyang District of Beijing City '
            }
          ]
        },
        {
    
          name: ' Shanghai ',
          spots: [
            {
    
              address: ' Shanghai Disneyland '
            },
            {
    
              address: ' Shanghai Museum '
            },
            {
    
              address: ' Shanghai Glass Art Museum '
            },
            {
    
              address: ' Nanjing Road Pedestrian Street '
            }
          ]
        }
    ],
    message: ' Filter components ',
  },
  
  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>