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


Posted in Vue.js onMarch 13, 2022

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

效果图如下:

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

四、在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指令的用法介绍

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Vue.js 相关文章推荐
vue+iview实现分页及查询功能
Nov 17 Vue.js
Vue实现购物小球抛物线的方法实例
Nov 22 Vue.js
在Vue中使用CSS3实现内容无缝滚动的示例代码
Nov 27 Vue.js
Vue3+elementui plus创建项目的方法
Dec 01 Vue.js
Vue+element-ui添加自定义右键菜单的方法示例
Dec 08 Vue.js
Vue中computed和watch有哪些区别
Dec 19 Vue.js
Vue 简单实现前端权限控制的示例
Dec 25 Vue.js
vue watch监控对象的简单方法示例
Jan 07 Vue.js
vue实现一个获取按键展示快捷键效果的Input组件
Jan 13 Vue.js
Vue SPA 首屏优化方案
Feb 26 Vue.js
vue中data改变后让视图同步更新的方法
Mar 29 Vue.js
vue实现同时设置多个倒计时
May 20 Vue.js
Vue2.0搭建脚手架
Vue.js中v-for指令的用法介绍
Mar 13 #Vue.js
Vue如何清空对象
Mar 03 #Vue.js
Vue中Object.assign清空数据报错的解决方案
Mar 03 #Vue.js
vue实现移动端div拖动效果
Mar 03 #Vue.js
vue实现滑动解锁功能
Vue全局事件总线你了解吗
Feb 24 #Vue.js
You might like
php中常用的预定义变量小结
2012/05/09 PHP
thinkPHP模板中for循环与switch语句用法示例
2016/11/30 PHP
thinkphp5 migrate数据库迁移工具
2018/02/20 PHP
javascript Ext JS 状态默认存储时间
2009/02/15 Javascript
Javascript学习笔记6 prototype的提出
2010/01/11 Javascript
jQuery中ajax的使用与缓存问题的解决方法
2013/12/19 Javascript
jQuery的DOM操作之删除节点示例
2014/01/03 Javascript
js数组中如何随机取出一个值
2014/06/13 Javascript
火狐下input焦点无法重复获取问题的解决方法
2014/06/16 Javascript
浅谈JavaScript function函数种类
2014/12/29 Javascript
VUEJS实战之利用laypage插件实现分页(3)
2016/06/13 Javascript
jquery+Jscex打造游戏力度条
2020/09/12 Javascript
深入理解javascript中concat方法
2016/12/12 Javascript
JavaScript实现两个select下拉框选项左移右移
2017/03/09 Javascript
详解利用 Vue.js 实现前后端分离的RBAC角色权限管理
2017/09/15 Javascript
jQuery实现table表格checkbox全选的方法分析
2018/07/04 jQuery
vue.js提交按钮时进行简单的if判断表达式详解
2018/08/08 Javascript
node中的密码安全(加密)
2018/09/17 Javascript
js实现点击图片在屏幕中间弹出放大效果
2019/09/11 Javascript
在Layui中操作数据表格,给指定单元格添加事件示例
2019/10/26 Javascript
jQuery实现容器间的元素拖拽功能
2020/12/01 jQuery
[01:41]DOTA2超级联赛专访YYF 称一辈子难忘TI2
2013/05/28 DOTA
Python编程深度学习计算库之numpy
2018/12/28 Python
Python中的 sort 和 sorted的用法与区别
2019/08/10 Python
python 爬虫百度地图的信息界面的实现方法
2019/10/27 Python
Python getattr()函数使用方法代码实例
2020/08/10 Python
加拿大最大的相机店:Henry’s
2017/05/17 全球购物
初级软件工程师面试题 Junior Software Engineer Interview
2015/02/15 面试题
C#中的验证控件有几种
2014/03/08 面试题
我的五年职业生涯规划
2014/01/23 职场文书
初中生操行评语大全
2014/04/24 职场文书
2014年党员自我评议对照检查材料
2014/09/20 职场文书
晋江市委常委班子四风问题整改工作方案
2014/10/26 职场文书
2014年服装销售工作总结
2014/11/27 职场文书
给老师的一封感谢信
2015/01/20 职场文书
Redis 异步机制
2022/05/15 Redis