<template> <div> <div :class="[flag ? 'red' : 'blue']">Hello,Vue!</div> <div :class="{show:true}">Hello,Vue!</div> <el-table :data="tableData" border id="printContainer"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="happy" label="爱好"></el-table-column> <el-table-column prop="status" label="状态"> <template slot-scope="scope"> <div v-if="scope.row.status == 0" :style="{'color':scope.row.status==1? 'red':'blue'}"> {{scope.row.status == 0 ? '未完成' : ' 已完成'}} </div> </template> </el-table-column> </el-table> </div> </template> <script> export default { data() { return { flag: true, tableData: [ { name: "王小虎", happy: "王小卤虎皮凤爪", status: 0 }, { name: "王小虎", happy: "王小卤虎皮凤爪", status: 1 }, { name: "王小虎", happy: "王小卤虎皮凤爪", status: 0 }, { name: "王小虎", happy: "王小卤虎皮凤爪", status: 1 } ] };<template> <div> <div :class="[flag ? 'red' : 'blue']">Hello,Vue!</div> <div :class="{show:true}">Hello,Vue!</div> <el-table :data="tableData" border id="printContainer"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="happy" label="爱好"></el-table-column> <el-table-column prop="status" label="状态"> <template slot-scope="scope"> <div v-if="scope.row.status == 0" :style="{'color':scope.row.status==1? 'red':'blue'}"> {{scope.row.status == 0 ? '未完成' : ' 已完成'}} </div> </template> </el-table-column> </el-table> </div> </template> <script> export default { data() { return { flag: true, tableData: [ { name: "王小虎", happy: "王小卤虎皮凤爪", status: 0 }, { name: "王小虎", happy: "王小卤虎皮凤爪", status: 1 }, { name: "王小虎", happy: "王小卤虎皮凤爪", status: 0 }, { name: "王小虎", happy: "王小卤虎皮凤爪", status: 1 } ] }; } }; </script> <style scoped> .red { color: red; } .blue { color: blue; } .show { color: blue; } </style> } }; </script> <style scoped> .red { color: red; } .blue { color: blue; } .show { color: blue; } </style>