v-bind-options.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 in style -->
    <!-- #ifdef WEB -->
    <view class="mb-10 v-bind-css"></view>
    <!-- #endif -->
  </view>
</template>

<script lang="uts">
import Foo from './Foo-options.uvue'

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

export default {
  components: { Foo },
  data() {
    return {
      dataInfo: {
        fontSize: '20px',
        backgroundColor: 'background-color: green',
        border: 'border: 2px solid red',
        fooProps: {
          title: 'foo title',
          num: 1,
          obj: {
            name: 'foo obj name'
          }
        },
        vBindClassBackgroundColor: 'red',
        vBindClassRpxHeight: '300rpx'
      } as DataInfo
    }
  }
}
</script>

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