Vue.js学习笔记：属性绑定 v-bind

╰+攻爆jí腚メ 2021-09-14 01:20 215阅读 0赞

v-bind  主要用于属性绑定，Vue官方提供了一个简写方式**:bind**，例如：

<a v-bind:href="url"></a>
    
    
    
    <a :href="url"></a>

**一.绑定HTML Class**

**(一)、对象语法：**

我们可以给v-bind:class 一个对象，以动态地切换class。注意：v-bind:class指令可以与普通的class特性共存

HTML代码：

<!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>pejeco</title>
    	<link rel="stylesheet" type="text/css" href="css/style.css">
    </head>
    <body>
    <ul class="box" v-bind:class="{'textColor':isColor, 'textSize':isSize}">
        <li>学习Vue</li>
        <li>学习Node</li>
        <li>学习React</li>
    </ul>
    <script src="js/vue.js"></script>
    <script src="js/app.js"></script>
    </body>
    </html>

CSS代码：

.box{
        border:1px dashed #f0f;
    }
    .textColor{
        color:#f00;
        background-color:#eef;
    }
    .textSize{
        font-size:30px;
        font-weight:bold;
    }

JS代码：

var vm= new Vue({
        el:'.box',
        data:{
            isColor:true,
            isSize:true
        }
    })

[![技术分享][wKiom1gLEX3ygKjKAADBZbnUz8Y282.png]][wKiom1gLEX3ygKjKAADBZbnUz8Y282.png]

从图中可以看到，HTML最终渲染为 <ul class="box textColor textSize"></ul>

当 isColor 和 isSize 变化时，class列表将相应的更新，例如，将isSize改成false，class列表将变为 <ul class="box textColor"></ul>

**也可以直接绑定数据里的一个对象：**

//HTML代码：
    <ul class="box" :class="classObject">
        <li>学习Vue</li>
        <li>学习Node</li>
        <li>学习React</li>
    </ul>
    
    
    //JS代码：
    var vm= new Vue({
        el:'.box',
        data:{
            classObject:{
                'textColor':true,
                'textSize':false //不渲染，注意看下面的截图
            }
        }
    })

[![技术分享][wKioL1gLE7jBVrvSAACSP3ftTFM106.png]][wKioL1gLE7jBVrvSAACSP3ftTFM106.png]

**(二)、数组语法**

我们可以把一个数组传给v-bind:class，以应用一个class列表

//HTML代码：
    <ul class="box" :class="[classA, classB]">
        <li>学习Vue</li>
        <li>学习Node</li>
        <li>学习React</li>
    </ul>
    
    
    //JS代码：
    var vm= new Vue({
        el:'.box',
        data:{
            classA:'textColor',
            classB:'textSize'
        }
    })

**如果想根据条件切换列表中的class，可以用三目运算**

//HTML代码：
    <ul class="box" :class="[isA?classA:‘‘, classB]">
        <li>学习Vue</li>
        <li>学习Node</li>
        <li>学习React</li>
    </ul>
    
    //JS代码：
    var vm= new Vue({
        el:'.box',
        data:{
            classA:'textColor',
            classB:'textSize',
            isA:false 
        }
    })

在这个例子中，首先判断isA的boolean值，如果为true，则渲染classA；如果为false，则不渲染。classB没有做三目运算，所以是始终显示的，看看页面截图

[![技术分享][wKioL1gLFw7zSxVrAACvZz_XHmk974.png]][wKioL1gLFw7zSxVrAACvZz_XHmk974.png]

**对于多个class，可以这么写：**

**二.绑定内联样式**

**(一)、对象语法**

v-bind:style 的对象语法十分直观--非常像CSS，其实它是一个Javascript对象，**CSS属性名必须用驼峰命名法**（官方文档写的是既可以用驼峰也可以用 短横分隔命名法），但是用短横分隔是会报错的

//HTML代码：（这里演示CSS属性名用短横分隔报错）
    <div class="box" :style="{color:activeColor, font-size:size}">红嘴绿鹦哥</div>
    
    //JS代码：
    var vm= new Vue({
        el:'.box',
     	data:{
            activeColor:'#f00',
            size:'30px',
            shadow:'5px 2px 6px #000'
        }
    })

页面报错：

[![技术分享][wKiom1gLIfCj-mf7AABB3Aq2nvA671.png]][wKiom1gLIfCj-mf7AABB3Aq2nvA671.png]

当我们按照驼峰命名法的规则去写的时候，一切正常：

HTML代码：

<div class="box" :style="\{color:activeColor, fontSize:size, textShadow:shadow\}">红嘴绿鹦哥</div>

查看页面效果：

[![技术分享][wKioL1gLIyqzc363AADADIC58MM045.png]][wKioL1gLIyqzc363AADADIC58MM045.png]

**也可以直接绑定到一个样式对象，这样更好，让模板更清晰：**

HTML代码：
    <div id="box" :style="styleObject">红嘴绿鹦哥</div>
    
    JS代码：
    var vm= new Vue({
        el:'#box',
     	data:{
            styleObject:{
                color:'red',
                fontSize:'30px'
            }
        }
    })

**(二)、数组语法**

可将多个样式对象应用到一个元素上

//HTML代码：
    <div class="box" :style="[styleObjectA, styleObjectB]">好好学习，天天向上</div>
    
    //JS代码：
    
    var vm2= new Vue({
        el:'.box',
        data:{
            styleObjectA:{
                fontSize:'36px',
                color:'blue'
            },
            styleObjectB:{
                textDecoration:'underline'
            }
        }
    })

页面效果：

[![技术分享][wKioL1gLJXeTZM4OAACU_F16ll4819.png]][wKioL1gLJXeTZM4OAACU_F16ll4819.png]

**三.添加图片SRC地址**

给img标签的src属性赋值时，按照传统的方法\{ \{url\}\}：

HTML代码：
    <img class="box" src="{
        {url}}" >
    
    JS代码：
    var vm= new Vue({
        el:'.box',
        data:{
            url:'https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png'
        }
    })

此时，会报一个404错误，查看控制台可以看到，Vue更加推荐我们使用**v-bind:src**

![20170727104849601][]

使用 v-bind:src  再来试试看

查看页面截图：  
[![技术分享][wKioL1gLKTuSVDu_AABbyo9XNJc308.png]][wKioL1gLKTuSVDu_AABbyo9XNJc308.png]

四.实现列表选中效果

<li v-for="(item,index) in items" v-bind:class="\{active:index == num\}"   
      v-on:click="itemactive(index)">\{ \{item.label\}\}</li>

<template>
      <div id="app">
        <h1 v-text="title"></h1>
        <ul class="itemslist">
          <li v-for="(item,index) in items" v-bind:class="{active:index == num}" 
          v-on:click="itemactive(index)">{
        {item.label}}</li>
        </ul>
      </div>
    </template>
    
    <script>
    export default {
      name: 'app',
      data: function () {
        return { 
          title: '好吃的水果，快来看：',
          items:[
            {
              label:'苹果'
            },
            {
              label:'火龙果'
            },
            {
              label:'香蕉'
            },
            {
              label:'凤梨'
            }
          ],
          num:0
        } 
      },
      methods:{
        //添加颜色
        itemactive:function(index) {
          this.num = index;
        }
           
      }
    }
    </script>
    
    <style>
    #app {
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    .itemslist{
      text-align:left;
      line-height:30px;
    }
    .active{
      color:#f00;
    }
    </style>

![20170803135220143][]

[Vues学习笔记：属性绑定 v-bind][Vues_ v-bind]

[wKiom1gLEX3ygKjKAADBZbnUz8Y282.png]: http://s1.51cto.com/wyfs02/M01/89/32/wKiom1gLEX3ygKjKAADBZbnUz8Y282.png
[wKioL1gLE7jBVrvSAACSP3ftTFM106.png]: /images/20210813/0a0bbb57a3c94af6aedcdd61b2e5d8ba.png
[wKioL1gLFw7zSxVrAACvZz_XHmk974.png]: /images/20210813/7adac748be8a4020803aabb752b04f5b.png
[wKiom1gLIfCj-mf7AABB3Aq2nvA671.png]: http://s1.51cto.com/wyfs02/M01/89/32/wKiom1gLIfCj-mf7AABB3Aq2nvA671.png
[wKioL1gLIyqzc363AADADIC58MM045.png]: /images/20210813/6217d4ea77a74a2e9d2b16f45d878e84.png
[wKioL1gLJXeTZM4OAACU_F16ll4819.png]: http://s1.51cto.com/wyfs02/M02/89/30/wKioL1gLJXeTZM4OAACU_F16ll4819.png
[20170727104849601]: /images/20210813/e66ef207b08b4017a1a097cecc6f16c1.png
[wKioL1gLKTuSVDu_AABbyo9XNJc308.png]: /images/20210813/b58ecf867cd0485282e20da07a2ea15c.png
[20170803135220143]: /images/20210813/b5577e788ba740c1aaa8cef6b0d2a48a.png
[Vues_ v-bind]: http://www.mamicode.com/info-detail-1581625.html