vueプロパティバインド:v-bind命令

1.基本文法

構文:v-bind:属性名.修飾子=属性値

略記::属性名.修飾子=属性値

属性名

h 5における有意義な属性名

DOM属性名(className,innerHTML)=>アルパカをハイフン"-"に変換し、修飾子を追加します.prop

vueバインド属性はhtml属性を基準とし、h 5には大文字と小文字が存在しない

である.

属性値:dataデータウェアハウス内の変数名

修飾子:prop、バインドされた属性がDOM属性の場合

を修飾するために使用される
2.機能

ラベルの属性をvue構文で動的データ

にバインドする.
3.特殊属性

booleanプロパティ:inputテキストボックスのdisabled

構文::disabled=「属性値」

属性値:JSでbooleanに変換できるすべての変数

空の文字列""および0:trueを返し、テキストボックスが無効になっていることは、元のJS

とは異なります.

nullおよびundefined:falseを返し、テキストボックスは有効状態

です.

    
    
    


    


        
        

        


        
        
    
    
        new Vue({
            el:"#app",
            data:{
                flag: false,
                val:"     ",
                num: 10
                // flag: "", //  
                //flag:0, //  
                // flag: null, //  
                // flag: undefined //  
            },
            methods:{
                sendCode(){
                    //    
                    this.flag = true;
                    this.val = "    (" + this.num + "s)";
                    //          
                    var timer = setInterval(()=>{ //          ，                   ，     this               ， window,      new        new      
                        if(this.num <= 0){ //      ，     
                            clearInterval(timer);
                            this.flag = false;
                            this.val = "     ";
                            this.num = 10;
                        }else{
                            this.num --;
                            this.val = "    (" + this.num + "s)";
                        }
                    },1000)
                    
                }
            }
        }) 
    

classプロパティ

構文::class="属性値"|:className.prop=「属性値」

属性値

文字列:スタイルの迅速な配置を実現し、スタイルに注意する前にスペース

を追加する必要があります.

配列:パターンの動的追加を実現し、削除に注意する際、どのパターンを具体的に削除するかを制御することができず、配列中の要素の順序に従って

を削除するしかない.

オブジェクト:スタイルの反発を実装し、

    
    
    
    


    

        
        
    
             
        
        
    
             
        
        
    
    
       new Vue({
            el:"#app",
            data:{
                // flag: "", //  
                //flag:0, //  
                // flag: null, //  
                flag: undefined, //  
                classStr:'fc',
                classArr:['fc'],
                classObj:{
                    'sta':true,
                    'success':false,
                    'error':false
                }
            },
            methods:{
                addBc(){
                    // this.classStr += " bc"; //  ：  bc        
                    this.classArr.push('bc')
                },
                changeBc(e){
                    console.log(e.target);
                    this.classObj.success =  e.target.value.length <= 5;
                    this.classObj.error =  e.target.value.length > 5;
                }
            }
       }) 
    

styleプロパティ

構文:v-bind:style=「属性値」|:style=「属性値」

属性値

文字列:通常のcssスタイル

オブジェクト:複数のcssスタイル

配列:複数のオブジェクトを1つの

にマージ

    
    
    


    

        
        
style    -   

        
        
style    -  

        
        
style    -  
        
    
    
        new Vue({
            el:"#app",
            data:{
                styleStr:'color:red',
                styleObj1:{
                    color:"red",
                    border:"1px solid red"
                },
                styleObj2:{
                    backgroundColor:'#ccc'
                }
                
            }
        })