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 + el-form 实现的多层循环表单验证
Nov 25 Vue.js
vue3.0实现插件封装
Dec 14 Vue.js
vue中watch的用法汇总
Dec 28 Vue.js
vue导入.md文件的步骤(markdown转HTML)
Dec 31 Vue.js
详解为什么Vue中的v-if和v-for不建议一起用
Jan 13 Vue.js
vue中data改变后让视图同步更新的方法
Mar 29 Vue.js
使用vue-element-admin框架从后端动态获取菜单功能的实现
Apr 29 Vue.js
Vue+Element UI实现概要小弹窗的全过程
May 30 Vue.js
一篇文章告诉你如何实现Vue前端分页和后端分页
Feb 18 Vue.js
三种方式清除vue路由跳转router-link的历史记录
Apr 10 Vue.js
分享一个vue实现的记事本功能案例
Apr 11 Vue.js
el-table-column 内容不自动换行的解决方法
Aug 14 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编程最快明白》第七讲:php图片验证码与缩略图
2010/11/01 PHP
PHP 删除文件与文件夹操作 unlink()与rmdir()这两个函数的使用
2011/07/17 PHP
利用php实现禁用IE和火狐的缓存问题
2012/12/03 PHP
php的POSIX 函数以及进程测试的深入分析
2013/06/03 PHP
php pdo oracle中文乱码的快速解决方法
2016/05/16 PHP
datePicker——日期选择控件(with jquery)
2007/02/20 Javascript
Web 前端设计模式--Dom重构 提高显示性能
2010/10/22 Javascript
使用js正则控制input标签只允许输入的值
2013/07/29 Javascript
Jquery:ajax实现翻页无刷新功能代码
2013/08/05 Javascript
eclipse导入jquery包后报错的解决方法
2014/02/17 Javascript
JQuery Tips相关(1)----关于$.Ready()
2014/08/14 Javascript
JS+CSS实现仿支付宝菜单选中效果代码
2015/09/25 Javascript
JS验证input输入框(字母,数字,符号,中文)
2017/03/23 Javascript
es7学习教程之fetch解决异步嵌套问题的方法示例
2017/07/21 Javascript
微信小程序之圆形进度条实现思路
2018/02/22 Javascript
JavaScript 扩展运算符用法实例小结【基于ES6】
2019/06/17 Javascript
ionic3双击返回退出应用的方法
2019/09/17 Javascript
ant-design-vue 实现表格内部字段验证功能
2019/12/16 Javascript
微信小程序实现搜索功能
2020/03/10 Javascript
python实现二维码扫码自动登录淘宝
2016/12/27 Python
Python连接数据库学习之DB-API详解
2017/02/07 Python
python读取csv文件并把文件放入一个list中的实例讲解
2018/04/27 Python
Python 中 function(#) (X)格式 和 (#)在Python3.*中的注意事项
2018/11/30 Python
基于python实现高速视频传输程序
2019/05/05 Python
python 实现按对象传值
2019/12/26 Python
解决c++调用python中文乱码问题
2020/07/29 Python
python爬虫中的url下载器用法详解
2020/11/30 Python
详解如何用HTML5 Canvas API控制图片的缩放变换
2016/03/22 HTML / CSS
HTML5页面直接调用百度地图API获取当前位置直接导航目的地的实现代码
2018/03/02 HTML / CSS
HTML5实现直播间评论滚动效果的代码
2020/05/27 HTML / CSS
英国家喻户晓的折扣商场:TK Maxx
2017/05/26 全球购物
大学校务公开实施方案
2014/03/31 职场文书
办公室打字员岗位职责
2014/04/16 职场文书
学习十八大的心得体会
2014/09/01 职场文书
MySQL 如何限制一张表的记录数
2021/09/14 MySQL
mysql 获取相邻数据项
2022/05/11 MySQL