Vue.js中v-bind指令的用法介绍

一、什么是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>

效果图如下：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 带你理解vue中的v-bind

    目录 一.v-bind关键源码分析 1.v-bind化的属性统一存储在哪里:attrsMap与attrsList 2.解析HTML,解析出属性集合attrs,在start回调中返回 3.在start回调中创建ASTElement,createASTElement(... ,attrs, ...) 4.创建后ASTElement会生成attrsList和attrsMap 5.attrs的数据类型定义 6.绑定属性获取函数 二.如何获取v-bind的值 1.v-bind:key源码分析 2.v-bi

  • 在vue中v-bind使用三目运算符绑定class的实例

    如图所示: 通过动态的切换isOk就可以达到切换class的效果,isOk可以为一个表达式如num>1,如果data中num大于1,则显示classA,否则显示classB 以上这篇在vue中v-bind使用三目运算符绑定class的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • 详解VueJs中的V-bind指令

    引子 v-bind  主要用于属性绑定,Vue官方提供了一个简写方式 :bind,例如: <!-- 完整语法 --> <a v-bind:href="url"></a> <!-- 缩写 --> <a :href="url"></a>   一.概述 v-bind  主要用于属性绑定,比方你的class属性,style属性,value属性,href属性等等,只要是属性,就可以用v-bind指令进行绑

  • vue基础之v-bind属性、class和style用法分析

    本文实例讲述了vue基础之v-bind属性.class和style用法.分享给大家供大家参考,具体如下: 一.属性 属性: v-bind:src="" width/height/title.... 简写: :src=""    推荐 <img src="{{url}}" alt="">    效果能出来,但是会报一个404错误 <img v-bind:src="url" alt="

  • 在vue中使用v-bind:class的选项卡方法

    //vue中的选项卡的实现,数据驱动dom,因此需要使用数据,来改变class: 详细见代码实现 <style> ul{overflow: hidden;} ul li{float: left;width: 150px;height: 35px;line-height: 35px;border: 1px solid red;list-style: none;cursor: pointer;} ul li.active{background-color: yellow} </style&g

  • vue指令 v-bind的使用和注意需要注意的点

    vue指令 v-bind的使用和注意需要注意的点

    目录 1.v-bind:可以为元素的属性绑定一些数据 2.v-bind:可以简写成 : 推荐直接写冒号 3.v-bind:指令表达式的拼接, 1.v-bind:可以为元素的属性绑定一些数据 <div id="app"> <p v-bind:title="message" v-bind:id="pId">我是p标签</p> </div> <script src="./js/vue.js

  • 一文读懂vue动态属性数据绑定（v-bind指令）

    v-bind的基本用法 一.本节说明 前面的章节我们学习了如何向页面html标签进行插值操作,那么如果我们想动态改变html标签的属性,该怎么办呢? 这就是我们这节开始要讲的内容v-bind. 二. 怎么做 ":"为v-bind的简写形式,也可称为语法糖 三. 效果 四. 深入 在上图中将a标签的href属性值设置为toutiao,VUE实例将自动去data里面寻找toutiao属性进行值绑定. 不只是a标签,所有的html标签属性都可以通过v-bind进行值绑定,然后通过改变数据动态

  • 详解vue中v-bind:style效果的自定义指令

    自定义指令 1.什么是自定义指令 以 v- 为前缀,然后加上自己定义好的名字组成的一个指令就是自定义指令.为什么要有自定义指令呢?在有些时候,你仍然需要对普通的DOM元素进行底层的操作,这个时候就可以用到自定义指令. 2.自定义指令的语法 全局自定义指令 // 注册一个全局自定义指令 `v-focus` Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时-- inserted: function (el) { // 聚焦元素 el.focus() } })

  • 详解VUE中v-bind的基本用法

    这两天学习了v-bind的基本用法,所以,今天添加一点小笔记. 1. v-bind:class(根据需求进行选择) 1.1 <style> .box{ background-color: #ff0; } .textColor{ color: #000; } .textSize{ font-size: 30px; } </style> <div id="app"> <span class="box" :class="

  • Vue v-bind动态绑定class实例方法

    现在很多网站,都是希望动态切换class,更换css样式.下面我们使用Vue的v-bind绑定class v-bind动态绑定class 对象语法绑定(常用) red和size的值为true就在class显示red和size,false就不显示.下面有两种写法: <style> .red{ color: red; } .size{ font-size: 20px; } </style> <div id="app"> <ul> <!-

随机推荐