五、vue基础-指令之v-bind_网站策划_上海毫米网络优化公司

您的位置：上海毫米网络优化公司 > 业务范围 > 网站策划 >

一、v-bind

前面要讲的一系列指令，主要是将值插入到模板内容中。

但是，除了内容需要动态来决定外，某些属性我们也希望动态来绑定。

比如动态绑定a元素的href属性；

比如动态绑定img元素的src属性；

绑定属性我们使用v-bind:

缩写：冒号（:）
预期：any(with argument) | Object(without argument)，可以是任何一个值也可以是一个对象
参数：attrOrProp(optional)
修饰符：.camel - 将 kebab-case-attribute名转换为 camelCase

用法动态地绑定一个或多个attribute，或一个组件prop到表达式。

（1）案例一：绑定img的src属性

添加下面一行代码之后，imgUrl就会去data里面找，找到之后就会替换掉。动态解析



  
    
    
    
    Document

（2）案例二：绑定a的href属性

（3）实战：点击按钮切换图片

点击按钮把当前展示的图片切换成另外一张图片。



  
    
    
    
    Document

图片是不是切换成功啦？那如果我们想再次点击切换回原来的图片我们该怎么去做？（根据目前所学到的知识）



  
    
    
    
    Document

（4）总结

五、vue基础-指令之v-bind,第6张

（5）绑定class介绍（重要）

最基本的绑定：

五、vue基础-指令之v-bind,第7张



  
    
    
    
    Document
  
  
    
      Hello World

五、vue基础-指令之v-bind,第8张

这时候我们来个需求，下方有个按钮，点击之后变成红色，再点击之后红色变成黑色。

五、vue基础-指令之v-bind,第9张直接上代码



  
    
    
    
    Document
    
  
  
    
      
      Hello World

五、vue基础-指令之v-bind,第10张

那大家看现在这个是不是一个对象？我们是不是可以把这整个对象抽取出去？

五、vue基础-指令之v-bind,第11张

五、vue基础-指令之v-bind,第12张

上面讲述好几种使用场景，目前我们只要知道这一点就好：

# {active: isActive, kobe:false} 键值对的值必须要是布尔类型，来决定前面的class（key）是否要绑定过来-->

还有数组语法介绍一下（了解）：

五、vue基础-指令之v-bind,第13张点击看下效果：

五、vue基础-指令之v-bind,第14张

（6）绑定style介绍

style中的某些值，来自data中，值是动态的，不是写死的。那我们该怎么绑定呢？现在这么做，肯定是没实现效果的。

五、vue基础-指令之v-bind,第15张

五、vue基础-指令之v-bind,第16张我们添加绑定style发现还是不行，该怎么办呢？

五、vue基础-指令之v-bind,第17张

其实我们可以把他放到对象里面，之间用逗号来分割。但是有个key是font-size，在js语法里，“-”符号是不会把他当做一个整体来着的。所以我们得给他加个单引号。‘30px’也是的，需要加一个引号。

五、vue基础-指令之v-bind,第18张

五、vue基础-指令之v-bind,第19张

五、vue基础-指令之v-bind,第20张

如果不这样子写其实也可以写成驼峰命名，写成驼峰的话也是能够正常的解析的:

五、vue基础-指令之v-bind,第21张

如果font-size的值也是来自data，如果fontSize写的30，那我们在style里面就得拼接字符串。如果fontSize直接写的'30px'，那就不用去拼接字符串。

五、vue基础-指令之v-bind,第22张

写好之后我们来看下效果。是不是绑定style啦。

五、vue基础-指令之v-bind,第23张

五、vue基础-指令之v-bind,第24张

（7）动态绑定属性

五、vue基础-指令之v-bind,第25张



  
    
    
    
    Document
  
  
    
      
      你好鸭赛丽亚

五、vue基础-指令之v-bind,第26张

（8）绑定一个对象（必须掌握）

我希望把props绑定在h2那个元素上面。

五、vue基础-指令之v-bind,第27张

希望能实现这种效果，那这种情况我们该怎么去做？

    Hello World

以前我们是咋实现的？挨个去写

五、vue基础-指令之v-bind,第28张

这样子手写是不是有点太麻烦了。

我们可以这么写， v-bind后面直接跟一个对象，会自动遍历这个对象里面所有的属性，并且添加到这个h2的元素上面。

五、vue基础-指令之v-bind,第29张

五、vue基础-指令之v-bind,第30张

上一篇：JavaScript详解

下一篇：【常见CSS扫盲之渐变效果】好看的24种CSS渐变效果汇总（附源码）