一、什么是v-bind指令

v-bind指令用于响应更新HTML特性，允许将一个或多个属性动态绑定到表达式。v-bind是应用在动态属性上面的。

二、语法

v-bind语法如下：

v-bind:动态属性名称="变量"

也可以简写成下面的形式：

:动态属性名称="变量"

代码示例如下：

<img :src="imgUrl" :title="title" />

这里的src和title都是<img>标签的属性，这里都是绑定到变量。

v-bind中还可以使用判断，例如：

<img :src="flag?imgUrl:imgUrl2" />

这里表示如果flag变量的值为true，那么src属性的值是变量imgUrl的值，否则src的属性值就是变量imgUrl2对应的值。

注意：只要是HTML标签的属性都可以这样去绑定属性值。

三、在class属性中使用v-bind指令

代码示例如下；

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>在class属性中使用v-bind指令</title>

    <!--引入vue.js-->

    <script src="node_modules/vue/dist/vue.js" ></script>

    <script>

       window.onload=function(){

           // 构建vue实例

           new Vue({

               el:"#my",// el即element，表示挂载的元素，不能挂载在HTML和body元素上面

               // data表示数据,data中可以是各种数据格式

               data:{

                      flag:true,

                      varStyle:"bindStyle", //值是样式的名称

                      style1:"colorStyle",

                      style2:"colorStyle2"

               },

               // 方法

               methods:{

               }

           })

       }

    </script>

    <style>

      .colorStyle {

        color: #ff6600;

      }

      .colorStyle2{

          margin-top: 10px;

          background-color: chartreuse;

          border: 1px solid blue;

      }

      .bindStyle {

        margin-top: 5px;

        color: red;

      }

      .bindStyle2 {

        margin-top: 5px;

        color: red;

        background-color: green;

      }

    </style>

</head>

<body>

    <div id="my">

        <!--单个样式引用,这里是直接写的data里面变量的名称-->

        <div :class="varStyle">这里是使用v-bind改变样式</div>

        <!--单个样式引用，双引号加单引号，单引号里面是样式的名称，这种方式可以不在data里面写变量-->

        <div :class="'bindStyle2'">直接引用样式的名称，不需要在data里面定义变量</div>

        <!--多个样式引用 使用数组的方式-->

        <div :class="[style1,style2]">这里是同时使用多个样式</div>

        <!--条件判断 格式：样式名：判断条件 注意：样式名不能用变量-->

        <div :class="{'colorStyle2':flag}">条件判断</div>

        <!--三目运算符 flag为真显示style2变量对应的样式，否则显示style1变量对应的样式-->

        <div :class="flag?style2:style1">三目运算符</div>

    </div>

</body>

</html>

效果图如下：

四、在style属性中使用v-bind指令

代码示例如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>style示例</title>

    <!--引入vue.js-->

    <script src="node_modules/vue/dist/vue.js" ></script>

    <script>

       window.onload=function(){

           // 构建vue实例

           new Vue({

               el:"#my",// el即element，表示挂载的元素，不能挂载在HTML和body元素上面

               // data表示数据,data中可以是各种数据格式

               data:{

                      flag:true,//布尔型

                      style1:{background:'blue'},

                      style2:{color:'red'},

                      unify:"unifyStyle"

               },

               // 方法

               methods:{

               }

           })

       }

    </script>

    <style>

       .unifyStyle{

           margin-top: 10px;

       }

    </style>

</head>

<body>

    <div id="my">

          <!--直接写内联样式：要采用驼峰写法，中间的-去掉-->

          <div :style="{color:'#f60',fontSize:'20px',marginTop:'10px'}">

              内联样式

          </div>

          <!--单个引用-->

          <div :style="style1" :class="unify">

                单个引用

          </div>

          <!--多个样式引用-->

          <div :style="[style1,style2]" :class="unify">多个样式引用</div>

          <!--三目运算符-->

          <div :style="flag?style1:style2" :class="unify">使用三目运算符进行判断</div>

    </div>

</body>

</html>

效果图如下：

Vue.js常用指令：v-bind的更多相关文章

  1. 02: vue.js常用指令

    目录:Vue其他篇 01: vue.js安装 02: vue.js常用指令 目录: 1.1 vuejs简介 1.2 选择器:根据id.class等查找 1.3 静态绑定数据 data 1.4 插值 { ...

  2. Vue - vue.js 常用指令

    Vue - vue.js 常用指令 目录: 一. vuejs模板语法之常用指令 1. 常用指令: v-html 2. 常用指令: v-text 3. 常用指令: v-for 4. 常用指令: v-if ...

  3. vue.js常用指令

    本文摘自:http://www.cnblogs.com/rik28/p/6024425.html Vue.js的常用指令 上面用到的v-model是Vue.js常用的一个指令,那么指令是什么呢? Vu ...

  4. 【Vue】vue.js常用指令

    http://www.cnblogs.com/rik28/p/6024425.html Vue.js的指令是以v-开头的,它们作用于HTML元素,指令提供了一些特殊的特性,将指令绑定在元素上时,指令会 ...

  5. 新人成长之入门Vue.js常用指令介绍（一）

    写在前面 作为一个刚步入职场工作的新人,对于公司中所用的技术和框架基本上不懂,只能从最基础的开始做起,进入公司接触的第一个框架就是前端框架Vue.js,几个功能做下来,觉得Vue.js首先学习起来真的 ...

  6. Vue.js常用指令：v-for

    一.什么是v-for指令 在Vue.js中,我们可以使用v-for指令基于源数据重复渲染元素.也就是说可以使用v-for指令实现遍历功能,包括遍历数组.对象.数组对象等. 二.遍历数组 代码示例如下: ...

  7. Vue.js常用指令：v-model

    一.v-model指令 v-model 用来获取表单元素的值.对应input输入框获取的是输入的值,单选按钮.复选框.下拉框获取的是选择的状态. 代码示例如下: <!DOCTYPE html&g ...

  8. Vue.js常用指令：v-on

    一.v-on指令 v-on指令在Vue.js中用来处理对应的事件.用法: v-on:事件类型="函数体" 例如:点击按钮的时候执行play事件 <button v-on:cl ...

  9. Vue.js常用指令：v-show和v-if

    一.v-show指令 v-show指令可以用来动态的控制DOM元素的显示或隐藏.v-show后面跟的是判断条件,语法如下: v-show="判断变量" 例如: v-show=&qu ...

随机推荐

  1. 学习ApiCloud遇到的问题

    1,当前账户xx 似乎没有权限访问此应用的云端数据,请切换账 检查项目的config.xml的id与apicloud的应用id是否一致

  2. POJ.1830.开关问题(高斯消元 异或方程组)

    题目链接 显然我们需要使每个i满足\[( ∑_{j} X[j]*A[i][j] ) mod\ 2 = B[i]\] 求这个方程自由元Xi的个数ans,那么方案数便是\(2^{ans}\) %2可以用^ ...

  3. [BZOJ2639]矩形计算

    [BZOJ2639]矩形计算 题目大意: 给定一个\(n\times m(n,m\le200)\)的矩阵.\(q(q\le10^5)\)次询问,每次询问一个子矩阵中所有数字出现次数的平方和. 思路: ...

  4. C1驾考总结

    C1学车经验总结       科目1:理论考试,要点:驾考宝典上有关科目一的题全部做一遍,然后使用模拟测试,连续能够三次测试通过95分以上,说明差不多了.其中要特别注意,多去回顾几次做错过的题目.   ...

  5. 走进java

    Java 技术体系 1.java技术语言 2.各种硬件平台上的java虚拟机 3.Class文件格式 4.Java API类库 5.来自商业机构和开源社区的第三方Java类库 我们把Java程序设计语 ...

  6. CentOS下创建网桥

    说明:以下创建的是永久网桥,即重启后依然生效. 0.安装网桥的依赖 yum -y install tunctl bridge-utils 1.创建网桥配置文件 UUID=`uuidgen` cat & ...

  7. Linux shell命令 cp 加上-f还是提示是否覆盖

    这是由于环境变量中有 allias cp='cp -i' 为了去掉这个系统自带的别名,能够使用grep -r --include="*" "alias cp"  ...

  8. Spring---面向切面编程（AOP模块）

    Spring AOP 简介 如果说 IoC 是 Spring 的核心,那么面向切面编程就是 Spring 最为重要的功能之一了,在数据库事务中切面编程被广泛使用. AOP 即 Aspect Orien ...

  9. iOS开发-适配器和外观模式

    适配器模式,属于结构型模式,其主要作用是将一个类的接口转换成客户希望的另外一个接口.适配器模式使得原本由于接口不兼容而不能一起工作的那些类可以一起工作.适配器模式有对象适配器和类适配器两种,类适配器模 ...

  10. spring mvc 异常统一处理

    摘自: http://gaojiewyh.iteye.com/blog/1297746