Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of vue how to achieve dynamic selected state switching effect, the content is detailed and easy to understand, the operation is simple and fast, and it has a certain reference value. I believe you will gain something after reading this vue article on how to achieve dynamic selected state switching effect. Let's take a look.

Dynamically selected state toggle effect

The content in HTML is as follows.

{{item.title}}

The content in JS is as follows.

Data () {return {current:0, liList: [{title:' China'}, {title:' US'}, {title:' UK'}, {title:' France'}]}} Methods: {addClass:function (index) {this.current=index}}

The content in CSS is as follows.

.ischeck {background: # e6e6e6; height: 30px; width: 50px; line-height: 0px; padding: 15px 10px;} vue state transition status display

The first method

Has been returned

Not returned

Not paid off

The second method

Using formatter to implement

The code is as follows:

Methods: {statusFormat: function (row, column) {let status = row.status; let statusW = "unpaid"; if (status = = undefined) {statusW = "unpaid";} switch (status) {case 1: statusW = "paid"; break Case 2: statusW = "refund application"; break;} return statusW;}} on "how to achieve dynamic selected state switching effect in vue" this article ends here, thank you for reading! I believe that everyone has a certain understanding of the knowledge of "how to achieve dynamic selected state switching effect in vue". If you want to learn more knowledge, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.