Home Web Front-end JS Tutorial vue.js implements binding class

vue.js implements binding class

Mar 26, 2018 pm 03:23 PM
class javascript vue.js

This 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>
Copy after login

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!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot Article

Hot Article

Hot Article Tags

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to implement an online speech recognition system using WebSocket and JavaScript How to implement an online speech recognition system using WebSocket and JavaScript Dec 17, 2023 pm 02:54 PM

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

WebSocket and JavaScript: key technologies for implementing real-time monitoring systems WebSocket and JavaScript: key technologies for implementing real-time monitoring systems Dec 17, 2023 pm 05:30 PM

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

How to implement an online reservation system using WebSocket and JavaScript How to implement an online reservation system using WebSocket and JavaScript Dec 17, 2023 am 09:39 AM

How to implement an online reservation system using WebSocket and JavaScript

Replace the class name of an element using jQuery Replace the class name of an element using jQuery Feb 24, 2024 pm 11:03 PM

Replace the class name of an element using jQuery

How to use JavaScript and WebSocket to implement a real-time online ordering system How to use JavaScript and WebSocket to implement a real-time online ordering system Dec 17, 2023 pm 12:09 PM

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 JavaScript and WebSocket: Building an efficient real-time weather forecasting system Dec 17, 2023 pm 05:13 PM

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

Simple JavaScript Tutorial: How to Get HTTP Status Code Simple JavaScript Tutorial: How to Get HTTP Status Code Jan 05, 2024 pm 06:08 PM

Simple JavaScript Tutorial: How to Get HTTP Status Code

Detailed explanation of PHP Class usage: Make your code clearer and easier to read Detailed explanation of PHP Class usage: Make your code clearer and easier to read Mar 10, 2024 pm 12:03 PM

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

See all articles