vue.js implements binding class
Mar 26, 2018 pm 03:23 PMThis article mainly shares with you how to implement binding class in vue.js, mainly in the form of code. I hope it can help you.
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <!-- Vue.js --> <script src="https://unpkg.com/vue/dist/vue.min.js"></script> </head> <body> <p id="app1"> <!--# 给v-bind设置一个对象,可以动态地切换class #--> <p :class="{'active':isActive}"></p> </p> <p id="app2"> <!--# 给v-bind设置一个对象,可以动态地切换class #--> <!--# 对象中也可以传入多个属性,来动态切换class。另外,:class可以与普通class共存 #--> <p class="static" :class="{'active':isActive,'error':isError}"></p> </p> <p id="app3"> <!--# 给v-bind设置一个对象,可以动态地切换class #--> <!--# 当:class的表达式过长或逻辑复杂时,还可以绑定一个计算属性,这是一种很友好和常见的用法,一般当条件多于两个时,都可以使用data或computer #--> <p :class="classes"></p> </p> </body> </html> <script> //例子一 var app1 = new Vue({ el:'#app1', data:{ //类名isActive,当其为true时,p会拥有类名active,为false时则没有 isActive:true } }); //例子二 var app2 = new Vue({ el:'#app2', data:{ //类名isActive,当其为true时,p会拥有类名active,为false时则没有 isActive:true, //类名isError,当其为true时,p会拥有类名error,为false时则没有 isError:true } }); //例子三 var app3 = new Vue({ el:'#app3', data:{ isActive:true, isError:false }, computed:{ classes:function () { return { active:this.isActive && !this.isError } //除了计算属性,你也可以直接绑定一个Object类型的数据,或者使用类似计算机属性的methods } } }) </script>
Related recommendations:
Detailed introduction to Vue.js dynamic binding class
Use v-bind binding in Vue.js Notes on class
Detailed explanation of Vue.js dynamic binding class
The above is the detailed content of vue.js implements binding class. For more information, please follow other related articles on the PHP Chinese website!

Hot Article

Hot tools Tags

Hot Article

Hot Article Tags

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

How to implement an online speech recognition system using WebSocket and JavaScript

WebSocket and JavaScript: key technologies for implementing real-time monitoring systems

How to implement an online reservation system using WebSocket and JavaScript

Replace the class name of an element using jQuery

How to use JavaScript and WebSocket to implement a real-time online ordering system

JavaScript and WebSocket: Building an efficient real-time weather forecasting system

Simple JavaScript Tutorial: How to Get HTTP Status Code

Detailed explanation of PHP Class usage: Make your code clearer and easier to read
