<template>
<view :style="getStyle"></view>
</template>
<script lang="ts">
import {
defineComponent,
CSSProperties,
computed,
} from 'vue';
export default defineComponent({
props: {
disabled: Boolean,
},
setup(props) {
const getStyle = computed(() => {
const style: CSSProperties = {};
if (props.disabled) {
style.background = '#ccc';
} else {
style.background = '#fff';
}
return style;
});
return {
getStyle,
};
},
});
</script>
fuuka
- 发布：2021-12-15 18:18
- 更新：2021-12-16 09:39
- 阅读：417
产品分类： uniapp/小程序/微信
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： win10
第三方开发者工具版本号： v1.05.2103200
基础库版本号： 2.0.0
项目创建方式： CLI
CLI版本号： 4.5.10
示例代码：
操作步骤：
<view :style="getStyle">测试测试</view>
// 另一种写法
<view :style="[getStyle]">测试测试</view>
<view :style="getStyle">测试测试</view>
// 另一种写法
<view :style="[getStyle]">测试测试</view>预期结果：
<view style="{color: #ccc}">测试测试</view>
// 另一种写法
<view style="{color: #ccc}">测试测试</view>
<view style="{color: #ccc}">测试测试</view>
// 另一种写法
<view style="{color: #ccc}">测试测试</view>实际结果：
<view style="[object Object]">测试测试</view>
// 另一种写法
报错 TypeError: _vm.__get_style is not a function
<view style="[object Object]">测试测试</view>
// 另一种写法
报错 TypeError: _vm.__get_style is not a functionbug描述：
直接在template中写 :style="{color: '#ccc'}"是可以渲染成功的。
fuuka (作者)
我知道可以直接手写，但是一项i项手写对于比如所显示的属性需要判断或者不限制哪些属性的复杂情况不友好。
2021-12-21 11:05