suchen

Heim  >  Artikel  >  Web-Frontend  >  vue.js implementiert die Bindungsklasse

vue.js implementiert die Bindungsklasse

小云云
小云云Original
2018-03-26 15:23:071455Durchsuche

In diesem Artikel erfahren Sie hauptsächlich, wie Sie die Bindungsklasse in vue.js implementieren, hauptsächlich in Form von Code. Ich hoffe, dass er Ihnen helfen kann. 

<!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="{&#39;active&#39;:isActive}"></p>
</p>

<p id="app2">
    <!--# 给v-bind设置一个对象，可以动态地切换class #-->
    <!--# 对象中也可以传入多个属性，来动态切换class。另外，:class可以与普通class共存 #-->
    <p class="static" :class="{&#39;active&#39;:isActive,&#39;error&#39;: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:&#39;#app1&#39;,
        data:{
            //类名isActive，当其为true时，p会拥有类名active，为false时则没有
            isActive:true
        }
    });


    //例子二
    var app2 = new Vue({
        el:&#39;#app2&#39;,
        data:{
            //类名isActive，当其为true时，p会拥有类名active，为false时则没有
            isActive:true,
            //类名isError，当其为true时，p会拥有类名error，为false时则没有
            isError:true
        }
    });


    //例子三
    var app3 = new Vue({
        el:&#39;#app3&#39;,
        data:{
            isActive:true,
            isError:false
        },
        computed:{
            classes:function () {

                return {
                    active:this.isActive && !this.isError
                }
                //除了计算属性，你也可以直接绑定一个Object类型的数据，或者使用类似计算机属性的methods
            }
        }
    })
</script>

Verwandte Empfehlungen:

Detaillierte Einführung in die dynamische Bindungsklasse von Vue.js

Verwendung von v-bind in Vue.js Hinweise zu Bindungsklassen

Detaillierte Erläuterung der dynamischen Bindungsklasse von Vue.js

Das obige ist der detaillierte Inhalt vonvue.js implementiert die Bindungsklasse. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Beispielanalyse einer js-Array-OperationNächster Artikel：Beispielanalyse einer js-Array-Operation

In Verbindung stehende Artikel

Mehr sehen