一、什么是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的更多相关文章

02: vue.js常用指令
目录:Vue其他篇 01: vue.js安装 02: vue.js常用指令目录: 1.1 vuejs简介 1.2 选择器:根据id.class等查找 1.3 静态绑定数据 data 1.4 插值 { ...
Vue - vue.js 常用指令
Vue - vue.js 常用指令目录: 一. vuejs模板语法之常用指令 1. 常用指令: v-html 2. 常用指令: v-text 3. 常用指令: v-for 4. 常用指令: v-if ...
vue.js常用指令
本文摘自:http://www.cnblogs.com/rik28/p/6024425.html Vue.js的常用指令上面用到的v-model是Vue.js常用的一个指令,那么指令是什么呢? Vu ...
【Vue】vue.js常用指令
http://www.cnblogs.com/rik28/p/6024425.html Vue.js的指令是以v-开头的,它们作用于HTML元素,指令提供了一些特殊的特性,将指令绑定在元素上时,指令会 ...
新人成长之入门Vue.js常用指令介绍（一）
写在前面作为一个刚步入职场工作的新人,对于公司中所用的技术和框架基本上不懂,只能从最基础的开始做起,进入公司接触的第一个框架就是前端框架Vue.js,几个功能做下来,觉得Vue.js首先学习起来真的 ...
Vue.js常用指令：v-for
一.什么是v-for指令在Vue.js中,我们可以使用v-for指令基于源数据重复渲染元素.也就是说可以使用v-for指令实现遍历功能,包括遍历数组.对象.数组对象等. 二.遍历数组代码示例如下: ...
Vue.js常用指令：v-model
一.v-model指令 v-model 用来获取表单元素的值.对应input输入框获取的是输入的值,单选按钮.复选框.下拉框获取的是选择的状态. 代码示例如下: <!DOCTYPE html&g ...
Vue.js常用指令：v-on
一.v-on指令 v-on指令在Vue.js中用来处理对应的事件.用法: v-on:事件类型="函数体" 例如:点击按钮的时候执行play事件 <button v-on:cl ...
Vue.js常用指令：v-show和v-if
一.v-show指令 v-show指令可以用来动态的控制DOM元素的显示或隐藏.v-show后面跟的是判断条件,语法如下: v-show="判断变量" 例如: v-show=&qu ...

随机推荐

在webpack中使用postcss之插件包precss
precss是一个预处理css的插件包,集成了很多postcss插件的功能,比如嵌套,变量,继承,混合,循环,判断.下面来介绍如何在webpack中使用precss.一.新建项目1.新建package ...
深港DJ好听的歌曲
好听女声 Dj陈爷-全中文全国语慢歌连版音乐挑选磁性女声翻唱慢摇串烧 http://www.vvvdj.com/play/154270.html DjPad仔-全中文国粤语Rnb音乐清风主流吃鸡学猫叫 ...
Tcp的三次握手，以及原理详解
http://blog.sina.com.cn/s/blog_6002b97001018fxh.html
git 创建SSH key
可以自己搭建一台运行Git的服务器,不过现阶段,为了学Git先搭个服务器绝对是小题大作.好在这个世界上有个叫GitHub的神奇的网站,从名字就可以看出,这个网站就是提供Git仓库托管服务的,所以,只要 ...
LINUX 修改SSH默认22端口的方法
首先修改配置文件 vi /etc/ssh/sshd_config 找到#Port 22一段,这里是标识默认使用22端口,修改为如下: Port 22 Port 50000 然后保存退出执行/etc/ ...
request.getParameter(“xxx”)的参数的取值
request.getParameter(“xxx”)的参数的取值的几种可能: 1. Html中form表单中标签的name属性: <form name="form" met ...
【转】Angular之constructor和ngOnInit差异及适用场景
原文:http://liuwenzhuang.github.io/2016/03/04/angular2-constructor-versus-ngOnInit.html -------------- ...
这些年我在技术路上做过最虚伪愚蠢的事情，就是在CSDN上刷屏赚分
现在似乎Github成了所谓技术人士的新宠,之前是博客,更早则是论坛. CSDN是众多技术论坛里比较突出的一个,人多高手也多,很多问题都能得到满意的回答. 谁都希望自己卓尔不群,我也不例外,我也想像那 ...
ionic 001
安装和穿件app npm install -g cordova ionic 使用模板创建app ionic start myApp blank ionic start myApp tabs ionic ...
Spark机器学习(2)：逻辑回归算法
逻辑回归本质上也是一种线性回归,和普通线性回归不同的是,普通线性回归特征到结果输出的是连续值,而逻辑回归增加了一个函数g(z),能够把连续值映射到0或者1. MLLib的逻辑回归类有两个:Logist ...