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 相关文章推荐
Vue3配置axios跨域实现过程解析
Nov 25 Vue.js
vue+element_ui上传文件,并传递额外参数操作
Dec 05 Vue.js
vue添加自定义右键菜单的完整实例
Dec 08 Vue.js
Vue3 实现双盒子定位Overlay的示例
Dec 22 Vue.js
如何在Vue项目中添加接口监听遮罩
Jan 25 Vue.js
vue前端工程的搭建
Mar 31 Vue.js
Vue实现下拉加载更多
May 09 Vue.js
详解vue身份认证管理和租户管理
May 25 Vue.js
Vue+Element UI实现概要小弹窗的全过程
May 30 Vue.js
Vue实现导入Excel功能步骤详解
Jul 03 Vue.js
Vue Element-ui表单校验规则实现
Jul 09 Vue.js
vue ref如何获取子组件属性值
Mar 31 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
SONY ICF-SW55的电路分析
2021/03/02 无线电
php数组函数序列 之array_count_values() 统计数组中所有值出现的次数函数
2011/10/29 PHP
基于PHP Socket配置以及实例的详细介绍
2013/06/13 PHP
PHP的魔术常量__METHOD__简介
2014/07/08 PHP
php解析字符串里所有URL地址的方法
2015/04/03 PHP
深入理解PHP之OpCode原理详解
2016/06/01 PHP
php+ajax无刷新上传图片的实现方法
2016/12/06 PHP
javascript获取dom的下一个节点方法
2014/09/05 Javascript
了不起的node.js读书笔记之例程分析
2014/12/22 Javascript
indexedDB bootstrap angularjs之 MVC DOMO (应用示例)
2016/06/20 Javascript
炫酷的js手风琴效果
2016/10/13 Javascript
JavaScript ES6中CLASS的使用详解
2016/11/22 Javascript
利用jquery正则表达式在页面验证url网址输入是否正确
2017/04/04 jQuery
浅谈react.js 之 批量添加与删除功能
2017/04/17 Javascript
javaScript中封装的各种写法示例(推荐)
2017/07/03 Javascript
详解webpack-dev-server使用http-proxy解决跨域问题
2018/01/13 Javascript
create-react-app修改为多页面支持的方法
2018/05/17 Javascript
Webstorm2016使用技巧(SVN插件使用)
2018/10/29 Javascript
微信小程序时间标签和时间范围的联动效果
2019/02/15 Javascript
Vue组件间的通信pubsub-js实现步骤解析
2020/03/11 Javascript
python写的一个文本编辑器
2014/01/23 Python
Python学习小技巧之列表项的推导式与过滤操作
2017/05/20 Python
简单实现python聊天程序
2018/04/01 Python
centos6.8安装python3.7无法import _ssl的解决方法
2018/09/17 Python
pip 安装库比较慢的解决方法(国内镜像)
2019/10/06 Python
使用python图形模块turtle库绘制樱花、玫瑰、圣诞树代码实例
2020/03/16 Python
Urban Outfitters德国官网:美国跨国生活方式零售公司
2018/05/21 全球购物
Perfume’s Club法国站:购买香水和化妆品
2019/05/02 全球购物
医科大学毕业生自荐信
2014/02/03 职场文书
文案策划求职信
2014/03/18 职场文书
关于诚信的活动方案
2014/08/18 职场文书
关于长城的导游词
2015/01/30 职场文书
2015年社区妇联工作总结
2015/04/21 职场文书
侵犯商业秘密的律师函
2015/05/27 职场文书
MYSQL 的10大经典优化案例场景实战
2021/09/14 MySQL
Android基于Fresco实现圆角和圆形图片
2022/04/01 Java/Android