当前位置：首页 > news >正文

实现vue的条件渲染

news 2025/9/14 11:27:43

在这里插入图片描述

我的需求是根据设备不同的状态渲染不同的标签。设备状态用device_State表示。
在线上面是一个vue的标签，我有一个数据state ，如何让这个标签根据数据的取值，修改内容，如state=1时，标签修改为离线
要根据数据的取值动态修改Vue组件的内容，可以使用条件渲染和绑定属性的方式来实现。具体来说，可以使用Vue的计算属性来根据state的取值返回不同的标签内容和属性，然后在模板中使用这个计算属性来动态渲染标签。

1.单一标签的实现方式

<template><el-tag :type="tagType">{{ tagContent }}</el-tag>
</template><script>
export default {data() {return {state: 1 // 初始值为 1};},computed: {tagType() {// 根据 state 的值返回不同的 type 属性return this.state === 1 ? 'success' : 'danger';},tagContent() {// 根据 state 的值返回不同的标签内容return this.state === 1 ? '在线' : '离线';}}
};
</script>

在上面的示例中，定义了一个计算属性 tagType，根据 state 的值返回不同的标签类型。同时，也定义了另一个计算属性 tagContent，根据 state 的值返回不同的标签内容。

在模板中，使用了动态绑定属性 :type 和动态渲染内容 {{ tagContent }}，这样当 state 的值发生变化时，组件的内容就会自动更新为相应的标签类型和内容。

这种只有一条数据的时候是比较方便的，但如果是在表格中，那么就需要获得行数据。

2.在表格中的实现方式

代码如下

<template><el-table :data="tableData" style="width: 100%"><el-table-column prop="name" label="名称"></el-table-column><el-table-column prop="state" label="状态"><template slot-scope="{ row }"><el-tag :type="tagType(row.state)">{{ tagContent(row.state) }}</el-tag></template></el-table-column></el-table>
</template><script>
export default {data() {return {tableData: [{ name: '项目1', state: 1 },{ name: '项目2', state: 0 },{ name: '项目3', state: 1 }]};},methods: {tagType(state) {return state === 1 ? 'success' : 'danger';},tagContent(state) {return state === 1 ? '在线' : '离线';}}
};
</script>

在上面的示例中，使用了slot插槽来动态渲染表格中的标签。在el-table-column组件中，使用了一个具名插槽slot-scope，通过row参数获取到当前行的数据，然后根据状态值动态渲染标签内容。在模板中，使用了动态绑定属性:type和动态渲染内容{{ tagContent(row.state) }}，这样就可以在表格中动态渲染标签内容了。
需要注意的是，在表格中使用slot插槽时，需要通过slot-scope来获取到当前行的数据。
除了这种方式外，还可以使用自定义组件来实现。

3.使用组件的方式实现

当组件需要在v-for指令中进行渲染时，可以将计算属性移动到组件的props中，然后通过父组件传递状态值进入子组件。

<template><div><el-tag :type="tagType">{{ tagContent }}</el-tag></div>
</template><script>
export default {props: {state: {type: Number,required: true}},computed: {tagType() {return this.state === 1 ? 'success' : 'danger';},tagContent() {return this.state === 1 ? '在线' : '离线';}}
};
</script>

在上面的示例中，我们将计算属性移动到了组件的props中，并通过父组件将状态值传递给子组件。在模板中，我们通过动态绑定属性:type和动态渲染内容{{ tagContent }}来渲染标签，并在v-for指令中循环渲染子组件，传递不同的状态值进入子组件。

以下是一个在v-for指令中使用组件的示例：

<template><div><div v-for="item in items" :key="item.id"><my-tag :state="item.state"></my-tag></div></div>
</template><script>
import MyTag from './MyTag.vue';export default {components: {MyTag},data() {return {items: [{ id: 1, state: 1 },{ id: 2, state: 0 },{ id: 3, state: 1 }]};}
};
</script>