一、什么是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. Linux笔记 rm -rf 嘻嘻

    学习目标:常用linux命令的使用 JAVAEE :后台应用都会涉及到linux系统,应用程序的部署,运维,分布式集群,大数据,云计算 虚拟机:虚拟出来的计算机 虚拟机软件:用来产生虚拟机的一个软件 ...

  2. C#全能数据库操作类及调用示例

    C#全能数据库操作类及调用示例 using System; using System.Data; using System.Data.Common; using System.Configuratio ...

  3. 4815: [Cqoi2017]小Q的表格 莫比乌斯反演 分块

    (Updated 2018.04.28 : 发现公式效果不好,重新处理图片)国际惯例的题面:看到这两个公式,很多人都会想到与gcd有关.没错,最终的结论就是f(a,b)=f(gcd(a,b))*(a/ ...

  4. SPOJTLE - Time Limit Exceeded(高维前缀和)

    题意 题目链接 题目的意思是给一个数组C,长度为n,每个数字的范围是2^m,然后要求构造一个数组a,满足 1.a[i] % C[i] !=0 ; 2.a[i] < 2^m ; 3.a[i] &a ...

  5. PHP Math 函数 mt_rand() 使用 Mersenne Twister 算法返回随机整数。

    语法 mt_rand(min,max) 说明 如果没有提供可选参数 min 和 max,mt_rand() 返回 0 到 RAND_MAX 之间的伪随机数.例如想要 5 到 15(包括 5 和 15) ...

  6. C语言中常用的字符串操作函数

    程序开头要声明 #include <string.h> 函数名: stpcpy 功 能: 拷贝一个字符串到另一个 用 法: char *stpcpy(char *destin, char ...

  7. 一个成功的Git分支模型

    原文: http://www.juvenxu.com/2010/11/28/a-successful-git-branching-model/ 本文中我会展示一种开发模型,一年前该模型就已经被我用在所 ...

  8. Mac下如何设置Eclipse默认浏览器为chrome

    http://stackoverflow.com/questions/5322574/how-can-i-set-chrome-as-default-external-browser-in-eclip ...

  9. C、C++、C#、Java、php、python语言的内在特性及区别

    C.C++.C#.Java.PHP.Python语言的内在特性及区别: C语言,它既有高级语言的特点,又具有汇编语言的特点,它是结构式语言.C语言应用指针:可以直接进行靠近硬件的操作,但是C的指针操作 ...

  10. java监控指定路径下文件及文件夹变化

    之前用jdk7的WatchService API(java.nio.file包)来做目录下的子文件监控,后改为使用commons-io包.主要有下面几点不同:1. WatchService是采用扫描式 ...