变量、判断、循环和方法调用

1、react18.3 变量、判断、循环+方法

    import { useState } from 'react'
    
    export default function Home() {
      const [isShow, setIsShow] = useState(false)
      const [list, setList] = useState([{ message: 'Foo' }, { message: 'Bar' }])
    
      function listItem(list) {
        return (
          list.map((item, index) => (
            <div key={index}>{item.message}</div>
          ))
        )
      }
      const _isShow = () => {
        setIsShow(!isShow)
      }
      return (
        <div>
          <div>
            {isShow && <div>显示了</div>}
            {isShow ? <div>显示了</div> : <div>不显示</div> }
          </div>
          <button onClick={_isShow}>按钮</button>
          <div>
            {
              list.map((item, index) => (
                <div key={index}>{item.message}</div>
              ))
            }
          </div>
          <div>
            {listItem(list)}
          </div>
    
        </div>
    
      )
    }

2、小程序 变量、判断、循环+方法

    <view>
        <view wx:if="{{isShow}}">
            展示了
        </view>
        <view wx:else>
            隐藏了
        </view>
        <button bind:tap="_c">按钮</button>
        <view wx:for="{{list}}" wx:key="index" wx:for-item="item" wx:for-index="index">
            {{index}}==>{{item.message}}
        </view>
    </view>

    Page({
      data: {
        isShow: true,
        list: [{message: 'Foo'}, {message: 'Bar'}]
      },
      _c(){
        this.setData({
          isShow:!this.data.isShow
        })
      },
    })

3、vue3.5 变量、判断、循环+方法

    <script setup lang="ts">
      import { ref } from 'vue'
      const isShow = ref(true)
      const items = ref([{ message: 'Foo' }, { message: 'Bar' }])
      const _isShow = () => {
        isShow.value = !isShow.value
      }
    </script>
    <template>
      <div>
        <div v-if="isShow">判断是否展示</div>
        <button @click="_isShow">按钮</button>
        <p v-for="(item,index) in items" :key="index">
          {{ item.message }}
        </p>
      </div>
    </template>