碼上快樂

相關內容    簡體    繁體

Vue中class與style綁定

本文轉載自   查看原文   2016-09-04 11:50   14383    vue class/ vue/ vue style

gitHub地址:https://github.com/manlili/vue_learn里面的lesson07

 

一 用對象的方法綁定class

很簡單,舉個栗子:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>class與style綁定</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div class="test">
            <div class="otherClass" :class="{'class1':name1,'class2':name2}">我是文字</div> <!--法一:用對象的方式實現-->
        </div>    
        <script type="text/javascript">
            var myVue = new Vue({
                el:".test",
                data: {
                    name1: true,
                    name2: false,
                }
            })
        </script>
    </body>
</html>

最后實現效果

 

關於使用對象綁定class,還可以用另外一種寫法:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>class與style綁定</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div class="test">
            <div class="test" :class="classObj">我是文字</div> <!--法一:用對象的方式實現-->
        </div>    
        <script type="text/javascript">
            var myVue = new Vue({
                el:".test",
                data: {
                    classObj: {
                        name1: false,
                        name2: true
                    }
                }
            })
        </script>
    </body>
</html>

最后的實現效果是:

 

二 用數組的方法綁定class

很簡單,舉個栗子:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>class與style綁定</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div class="test">
            <div class="otherClass" :class="[class1,class2]">我是文字</div> <!--法二:用數組的方式實現-->
        </div>
        
        <script type="text/javascript">
            var myVue = new Vue({
                el:".test",
                data: {
                    class1: 'name1',
                    class2: 'name2',
                }
            })
        </script>
    </body>
</html>

實現效果:

 

其實在數組中還可以用判斷是否顯示這個類名,舉個例子:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>class與style綁定</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div class="test">
            <div class="otherClass" :class="[class1,isShow? class2:'']">我是文字</div> <!--法二:用數組的方式實現-->
        </div>
        
        <script type="text/javascript">
            var myVue = new Vue({
                el:".test",
                data: {
                    class1: 'name1',
                    class2: 'name2',
                    isShow: false
                }
            })
        </script>
    </body>
</html>

實現效果是:

 

三  用數組和對象混合的方法綁定class

舉個例子:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>class與style綁定</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div class="test">
            <div class="otherClass" :class="[class1,{class2: isShow}]">我是文字</div> <!--法二:用數組的方式實現-->
        </div>
        
        <script type="text/javascript">
            var myVue = new Vue({
                el:".test",
                data: {
                    class1: 'name1',
                    class2: 'name2',
                    isShow: true
                }
            })
        </script>
    </body>
</html>

實現的效果:

 

四 用對象的方式實現style綁定

舉個例子:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>class與style綁定</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div class="test">
            <div class="otherClass" :style="{color: yanse,width: kuan + 'px' }">我是文字</div> <!--法一:用對象的方式實現-->
        </div>    
        <script type="text/javascript">
            var myVue = new Vue({
                el:".test",
                data: {
                    yanse: 'red',
                    kuan: 100,
                }
            })
        </script>
    </body>
</html>

實現效果如下:

 

其實也可以寫為第二種方式:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>class與style綁定</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div class="test">
            <div class="otherClass" :style="styleObj">我是文字</div> <!--法一:用對象的方式實現-->
        </div>    
        <script type="text/javascript">
            var myVue = new Vue({
                el:".test",
                data: {
                    styleObj: {
                        color: 'pink',
                        width: '200px',
                    }
                }
            })
        </script>
    </body>
</html>

實現結果是:

 

五 用數組的方式實現style綁定

沒法單獨用數組的實現style綁定,或者我沒有測試出來方法,寫在這里純粹是因為我有強迫症,需要占個位置

 

六 用數組和對象混合的方式實現style綁定

舉個例子:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>class與style綁定</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div class="test">
            <div class="otherClass" :style="[styleObjectA,styleObjectB]">我是文字</div> <!--法一:用數組和對象的方式實現-->
        </div>    
        <script type="text/javascript">
            var myVue = new Vue({
                el:".test",
                data: {
                    styleObjectA: {
                        color: 'red',
                        width: '100px',
                    },
                    styleObjectB: {
                        top: '20px'
                    }
                }
            })
        </script>
    </body>
</html>

實現效果:

 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 Vue中Class與Style如何動態綁定 vue Class與Style綁定 Vue Class 與 Style 綁定 Vue綁定屬性 綁定Class 綁定style vue綁定屬性、綁定class及綁定style vue如何綁定多個class style Vue#Class 與 Style 綁定 vue入門：（class與style綁定） 3. vue中的class和style的動態綁定 vue 中動態綁定class 和 style的方法
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM