首页 > 编程知识 正文

vue动态创建的元素如何实现双向绑定,vue中class的动态绑定

时间:2023-05-06 01:41:57 阅读:204332 作者:2219

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传参用到了闭包的概念。

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。