vue提供动态绑定class的方法,根据属性控制控制class的显示与隐藏。
testStyle,testStyle2是类名,是否在元素中引用该类,取决于后面的方法(属性)传递回来的值(true 或 false)
用法实例:
<template> <div> <div :class="{testStyle:testComputed}">123</div> <div :class="{testStyle2:testMethod}">456</div> <!-- 传递参数,推荐使用methods控制,computed需要写闭包 --> <div v-for="(item, index) in tableData" :key="index" :class="{testStyle:testComputed2(item)}">123</div> <div v-for="(item, index) in tableData" :key="index" :class="{testStyle2:testMethod2(item)}">123</div> </div></template><script>export default { name: "computed", data() { return { test: false, tableData: [true, false, true], }; }, methods: { testMethod() { return true; }, testMethod2(flag) { return flag; } }, computed: { testComputed: () => { return true; }, testComputed2: () => { return item => { return item; } } },};</script><style lang="scss" scoped>.testStyle { color: red;}.testStyle2 { color: blue;}</style>如果需要在绑定的方法中传递参数,推荐写到methods中,这种方式的代码更加简洁易懂。使用computed传参用到了闭包的概念。