v-bind-composition.uvue

<template>
  <view class="page">
    <!-- v-bind attribute -->
    <button id="disabled-btn" class="mb-10" :disabled="true">
      :disabled true
    </button>
    <button id="v-bind-disabled-btn" class="mb-10" v-bind:disabled="false">
      v-bind:disabled false
    </button>

    <!-- v-bind style -->
    <view class="flex justify-between flex-row mb-10">
      <text>bind object style fontSize:</text>
      <text id="bind-object-style" :style="{ fontSize: dataInfo.fontSize }">
        {{ dataInfo.fontSize }}
      </text>
    </view>
    <view
      id="bind-array-style"
      class="mb-10 p-10"
      :style="[dataInfo.backgroundColor, dataInfo.border]">
      <view>bind arr style</view>
      <view class="my-10">{{ dataInfo.backgroundColor }}</view>
      <view>{{ dataInfo.border }}</view>
    </view>

    <!-- v-bind props -->
    <Foo
      :title="dataInfo.fooProps.title"
      :num="dataInfo.fooProps.num"
      :obj="dataInfo.fooProps.obj" />

    <!-- v-bind props -->
    <Foo checked />

    <!-- v-bind in style -->
    <!-- #ifdef WEB -->
    <view class="mb-10 v-bind-css"></view>
    <!-- #endif -->
  </view>
</template>

<script setup lang="uts">
import Foo from './Foo-composition.uvue'
import {type FooPropsObj} from './Foo-composition.uvue'

type FooProps = {
  title : string
  num : number
  obj : FooPropsObj
}
type DataInfo = {
  fontSize : string
  backgroundColor : string
  border : string
  fooProps : FooProps
  vBindClassBackgroundColor : string,
  vBindClassRpxHeight : string,
}

const dataInfo = reactive({
  fontSize: '20px',
  backgroundColor: 'background-color: green',
  border: 'border: 2px solid red',
  fooProps: {
    title: 'foo title',
    num: 1,
    obj: {
      name: 'foo obj name',
    } as FooPropsObj
  },
  vBindClassBackgroundColor: 'red',
  vBindClassRpxHeight: '300rpx'
} as DataInfo)

defineExpose({
  dataInfo
})
</script>

<style>
/* #ifdef WEB */
.v-bind-css {
  background-color: v-bind(dataInfo.vBindClassBackgroundColor);
  height: v-bind(dataInfo.vBindClassRpxHeight);
}
/* #endif */
</style>