vue根据ID(数字、编号)显示对应的文字状态
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
原来的样式
想要显示的样式
方式一:使用slot-scope+计算属性;(关于计算属性传参,参考的是vue 计算属性传参,并返回处理结果)
方式二:使用slot-scope
<template>
<el-table :data="TemplateList" highlight-current-row>
<el-table-column label="模板类型方式一">
<template slot-scope="scope">
{{computedSiteType(scope.row.SiteType)}}
</template>
</el-table-column>
<el-table-column label="模板类型方式二">
<template slot-scope="scope">
{{options[scope.row.SiteType]['label']}}
</template>
</el-table-column>
</el-table>
<template>
computed:{
computedSiteType(){
return function(siteType){
return this.options[siteType]['label']
}
},
},
data(){
options: [
{
value: "0",
label: "全部"
},
{
value: "1",
label: "PC版"
},
{
value: "2",
label: "手机版"
}...
],
}
别人的方法
使用map定义
// 定义字典
const map = {boolean: ['否', '是']}
// 或者
const map = {boolean: {0: '否', 1: '是', 2: '不知道'}}
// 调用
<div>{{map.boolean[item.enable]}}</div>
或者使用计算属性
<div id="app"><h1>{{ isture }}</h1></div>
<script>
var app = new Vue({
el : "#app",
data : {
info:[{"id":"123","code":"Y002","name":"芝士饼干","channel":"网银","description":"网银","enable":1,"order":2}]
},
computed : {
isture : function(){
return this.info[0]['enable']==1 ? "是":"否"
}
}
})
</script>
GitHub 加速计划 / vu / vue
207.52 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:1 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 3 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 3 个月前
更多推荐
已为社区贡献4条内容
所有评论(0)