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 相关文章推荐
springboot+vue实现文件上传下载
Nov 17 Vue.js
vue绑定class的三种方法
Dec 24 Vue.js
Vue实现简易购物车页面
Dec 30 Vue.js
梳理一下vue中的生命周期
Dec 30 Vue.js
vue前端工程的搭建
Mar 31 Vue.js
详解vue中v-for的key唯一性
May 15 Vue.js
vue实现同时设置多个倒计时
May 20 Vue.js
解决Vue+SpringBoot+Shiro跨域问题
Jun 09 Vue.js
详解Vue slot插槽
Nov 20 Vue.js
Vue3如何理解ref toRef和toRefs的区别
Feb 18 Vue.js
vue3引入highlight.js进行代码高亮的方法实例
Apr 08 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
WordPress开发中的get_post_custom()函数使用解析
2016/01/04 PHP
Zend Framework入门教程之Zend_Registry组件用法详解
2016/12/09 PHP
PHP 进度条函数的简单实例
2017/09/19 PHP
PHP观察者模式示例【Laravel框架中有用到】
2018/06/15 PHP
PHP判断函数是否被定义的方法
2019/06/21 PHP
JavaScript 图像动画的小demo
2012/05/23 Javascript
cument.execCommand()用法深入理解
2012/12/04 Javascript
关于js内存泄露的一个好例子
2013/12/09 Javascript
一个JS函数搞定网页标题(title)闪动效果
2014/05/13 Javascript
JavaScript实现基于Cookie的存储类实例
2015/04/10 Javascript
jQuery短信验证倒计时功能实现方法详解
2016/05/25 Javascript
基于node搭建服务器,写接口,调接口,跨域的实例
2018/05/13 Javascript
Node.js连接Sql Server 2008及数据层封装详解
2018/08/27 Javascript
vue绑定数字类型 value为数字的实例
2020/08/31 Javascript
javascript实现点击按钮切换轮播图功能
2020/09/23 Javascript
vuecli项目构建SSR服务端渲染的实现
2020/10/30 Javascript
python mysqldb连接数据库
2009/03/16 Python
用实例详解Python中的Django框架中prefetch_related()函数对数据库查询的优化
2015/04/01 Python
Ruby元编程基础学习笔记整理
2016/07/02 Python
python使用正则表达式替换匹配成功的组并输出替换的次数
2017/11/22 Python
Python判断对象是否相等及eq函数的讲解
2019/02/25 Python
浅析Python 读取图像文件的性能对比
2019/03/07 Python
Python3将数据保存为txt文件的方法
2019/09/12 Python
解决flask接口返回的内容中文乱码的问题
2020/04/03 Python
利用Python中的Xpath实现一个在线汇率转换器
2020/09/09 Python
Python+Appium实现自动化清理微信僵尸好友的方法
2021/02/04 Python
美国顶级户外凉鞋品牌:Chacos
2017/03/27 全球购物
介绍一下木马病毒的种类
2015/07/26 面试题
2014年度工作总结报告
2014/12/15 职场文书
酒店总经理岗位职责
2015/04/01 职场文书
刑事起诉书范文
2015/05/19 职场文书
结婚司仪主持词
2015/06/29 职场文书
2015年教师节广播稿
2015/08/19 职场文书
《童年》读后感(三篇)
2019/08/27 职场文书
JavaScript利用html5新方法操作元素类名详解
2021/11/27 Javascript
volatile保证可见性及重排序方法
2022/08/05 Java/Android