vue 第三天（绑定属性）

我会带着你远行 2022-11-03 05:43 105阅读 0赞

# vue 第三天（绑定属性） #

## 绑定属性-----> v-bind ##

### 1、v-bind （简写 : ）动态绑定属性 ###

**因为标签里面不能写 mustache语法,如**

<div id="vue_one">
        <a href="{ {url}}"></a>
    </div>
    <script type="text/javascript">
        const vm = new Vue({ 
            el: '#vue_one',
            data: { 
                url: "http://www.baidu.com",
            }
        })
    </script>

**url在标签中用不了所以我们就写v-bind属性来在标签中使用 v-bind: 和 : 符号 是一个意思 只是一个简写一个完整写法**

<div id="vue_one">
        <a v-bind:href="url">123</a>
        <a :href="url">123</a>
    </div>
    <script type="text/javascript">
        const vm = new Vue({ 
            el: '#vue_one',
            data: { 
                url: "http://www.baidu.com",
            }
        })
    </script>

### 2、v-bind （简写 : ）动态绑定class ###

**单写 ·字符串· 绑定class boolean值用来判定这个class是否生效**

<div id="vue_one">
        
        
        <h2 :class="{key1:true,key2:false}">123</h2>
    </div>
    <script type="text/javascript">
        const vm = new Vue({ 
            el: '#vue_one',
            data: { 
                url: "http://www.baidu.com",
            }
        })
    </script>

**（对象语法）动态绑定class，在vue里定义ture和false**

<div id="vue_one">
        
        
        <h2 :class="{key1:value1,key2:value2}">123</h2>
    </div>
    <script type="text/javascript">
        const vm = new Vue({ 
            el: '#vue_one',
            data: { 
                url: "http://www.baidu.com",
                value1:true,
                value2:true
            }
        })
    </script>

**（对象语法）通过 方法 动态绑定class，在vue里定义ture和false**

<div id="vue_one">
        
        
        <h2 :class="getClass()">123</h2>
    </div>
    <script type="text/javascript">
        const vm = new Vue({ 
            el: '#vue_one',
            data: { 
                url: "http://www.baidu.com",
                value1:true,
                value2:true
            },
            methods:{ 
                getClass : function(){ 
                    return { key1:this.value1,key2:this.value2}
                }
            }
        })
    </script>

**（数组语法）过 数组 动态绑定class，在vue里定义ture和false(用得少)**

<div id="vue_one">
        
        
        <h2 :class="getClass()">123</h2>
    </div>
    <script type="text/javascript">
        const vm = new Vue({ 
            el: '#vue_one',
            data: { 
                url: "http://www.baidu.com",
                key1:"aaaaa",
                key2:"bbbbba"
            },
            methods:{ 
                getClass : function(){ 
                    return [this.key1,this.key2]
                }
            }
        })
    </script>

### 3、v-bind （简写 : ）动态绑定style ###

**（对象语法）动态绑定style，在vue里定义ture和false**

<div id="vue_one">
        
        
        <h2 :style="getClass()">123</h2>
    </div>
    <script type="text/javascript">
        const vm = new Vue({ 
            el: '#vue_one',
            data: { 
                url: "http://www.baidu.com",
                key1:"red",
                key2:"100px"
            },
            methods:{ 
                getClass : function(){ 
                    return { color:this.key1,fontSize:this.key2}
                }
            }
        })
    </script>

**（数组语法）动态绑定style，在vue里定义ture和false**

<div id="vue_one">
        
        
        <h2 :style="getClass()">123</h2>
    </div>
    <script type="text/javascript">
        const vm = new Vue({ 
            el: '#vue_one',
            data: { 
                url: "http://www.baidu.com",
                color:{ color:'red'},
                fontSize:{ fontSize:'100px'}
            },
            methods:{ 
                getClass : function(){ 
                    return [this.color,this.fontSize]
                }
            }
        })
    </script>

`花开一千年,花落一千年,花叶永不见`