vue 第三天（绑定属性）

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:value1,key2:value2}">123</h2>-->
    <!-- 案例    <h2 :class="{类名1:boolean,类名2:boolean}">123</h2>-->
    <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>-->
    <!-- 案例    <h2 :class="{类名1:boolean,类名2:boolean}">123</h2>-->
    <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="{key1:value1,key2:value2}">123</h2>-->
    <!-- 案例    <h2 :class="{类名1:boolean,类名2:boolean}">123</h2>-->
    <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="['key1','key2']">123</h2> 要是字符串的话不用加双引号-->
    <!-- 案例    <h2 :class="[key1,key2]">123</h2> 要是变量的话加双引号-->
    <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 :class="{key(属性名):value(属性值)}">123</h2>-->
    <!-- 案例    <h2 :class="{color:this.key1,fontSize:this.key2}">123</h2>-->
    <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 :class="[key(属性名),key2(属性名)]">123</h2>-->
    <!-- 案例    <h2 :class="[color,fontSize]">123</h2>-->
    <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>

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