search
HomeWeb Front-endFront-end Q&AWhat is the use of v-bind in vue
What is the use of v-bind in vueDec 15, 2022 am 10:24 AM
vuevue3v-bind

In vue, the v-bind instruction is mainly used for attribute binding. The complete syntax "v-bind:property="value"" and the abbreviated syntax ":href="value"" indicate that the attribute will be The attribute value is treated as a variable, Vue will parse it, and assign the parsed variable to the corresponding value in the data attribute.

What is the use of v-bind in vue

The operating environment of this tutorial: windows7 system, vue3 version, DELL G3 computer.

Introduction to v-bind in vue

v-bind is mainly used for attribute binding, such as your class attribute, style attribute, value Attributes, href attributes, etc., as long as they are attributes, they can be bound using the v-bind directive.

v-bind is mainly used for attribute binding. Vue officially provides an abbreviation: bind, such as:

<!-- 完整语法 -->
v-bind:property="value"
//此时 value会被解析成一个变量,若是在vue实例中没有找到,会显示找不到错误


<!-- 缩写 -->
:href="value"

After adding v-bind, it means that the attribute value of the attribute as a variable Vue will parse it and assign the parsed variables to the corresponding values ​​​​in the data attribute.

Binding HTML Class

1. Object syntax:

We can give v- bind:class an object to dynamically switch classes. Note: v-bind:class directive can coexist with ordinary class attributes

HTML code:

<ul class="box" v-bind:class="{‘textColor‘:isColor, ‘textSize‘:isSize}">
    <li>学习Vue</li>
    <li>学习Node</li>
    <li>学习React</li>
</ul>

CSS code:

.box{
    border:1px dashed #f0f;
}
.textColor{
    color:#f00;
    background-color:#eef;
}
.textSize{
    font-size:30px;
    font-weight:bold;
}

JS code:

var vm= new Vue({
    el:‘.box‘,
    data:{
        isColor:true,
        isSize:true
    }
})

What is the use of v-bind in vue

As you can see from the picture, the HTML is finally rendered as

    When isColor and isSize change , the class list will be updated accordingly. For example, if isSize is changed to false, the class list will become

      You can also bind it directly An object in the specified data:

      HTML code:

      <ul class="box" :class="classObject">
          <li>学习Vue</li>
          <li>学习Node</li>
          <li>学习React</li>
      </ul>

      JS code:

      var vm= new Vue({
          el:‘.box‘,
          data:{
              classObject:{
                  ‘textColor‘:true,
                  ‘textSize‘:false //不渲染,注意看下面的截图
              }
          }
      })

      What is the use of v-bind in vue

      2. Array syntax

      We can pass an array to v-bind:class to apply a class list

      HTML code:

      <ul class="box" :class="[classA, classB]">
          <li>学习Vue</li>
          <li>学习Node</li>
          <li>学习React</li>
      </ul>

      JS code:

      var vm= new Vue({
          el:‘.box‘,
          data:{
              classA:‘textColor‘,
              classB:‘textSize‘
          }
      })

      If you want to switch classes in the list based on conditions, you can use ternary arithmetic

      HTML code:

      <ul class="box" :class="[isA?classA:‘‘, classB]">
          <li>学习Vue</li>
          <li>学习Node</li>
          <li>学习React</li>
      </ul>

      JS code:

      var vm= new Vue({
          el:‘.box‘,
          data:{
              classA:‘textColor‘,
              classB:‘textSize‘,
              isA:false 
          }
      })

      In this example, first determine the boolean value of isA. If it is true, classA will be rendered; if it is false, it will not be rendered. ClassB does not perform ternary operations, so it is always displayed. Take a look at the page screenshot

      What is the use of v-bind in vue

      For multiple classes, you can write like this:

      <div v-bind:class="[classA, { classB: isB, classC: isC }]">

      Bind inline style

      1. Object syntax

      v-bind:style object The syntax is very intuitive - very similar to CSS. In fact, it is a Javascript object. CSS property names must use camel case (the official document states that either camel case or dash-separated nomenclature can be used). However, an error will be reported if separated by a dash.

      HTML code: (Here is a demonstration of CSS attribute names separated by a dash and an error will be reported)

      <div id="box" :style="{color:activeColor, font-size:size}">红嘴绿鹦哥</div>

      JS code:

      var vm= new Vue({
          el:‘#box‘,
          data:{
              activeColor:‘#f00‘,
              size:‘30px‘,
              shadow:‘5px 2px 6px #000‘
          }
      })

      Page error:

      What is the use of v-bind in vue

      When we write according to the rules of camel case naming, everything is normal:

      HTML code:

      <div id="box" :style="{color:activeColor, fontSize:size, textShadow:shadow}">红嘴绿鹦哥</div>

      View page effect :

      What is the use of v-bind in vue

      ## It can also be directly bound to a style object, which is better and makes the template clearer:

      HTML code:

      <div id="box" :style="styleObject">红嘴绿鹦哥</div>

      JS code:

      var vm= new Vue({
          el:‘#box‘,
          data:{
              styleObject:{
                  color:‘red‘,
                  fontSize:‘30px‘
              }
          }
      })

      2. Array syntax

      Can apply multiple style objects to one element

      HTML code:

      <div class="box" :style="[styleObjectA, styleObjectB]">好好学习,天天向上</div>

      JS code:

      var vm2= new Vue({
          el:‘.box‘,
          data:{
              styleObjectA:{
                  fontSize:‘36px‘,
                  color:‘blue‘
              },
              styleObjectB:{
                  textDecoration:‘underline‘
              }
          }
      })

      Page effect:

      What is the use of v-bind in vue

      Add image SRC Address

      When assigning a value to the src attribute of the img tag, follow the traditional method {{url}}:

      HTML code:

      <img  class="box lazy" src="/static/imghwm/default1.png" data-src="{{url}}" alt="What is the use of v-bind in vue" >

      JS code:

      var vm= new Vue({
          el:‘.box‘,
          data:{
              url:‘https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc76What is the use of v-bind in vue‘
          }
      })

      At this time, the image can be displayed normally, but a 404 error will be reported. You can see it by looking at the console. Vue is more recommended for us to use.

      v-bind:src

      What is the use of v-bind in vue

      使用 v-bind:src  再来试试看

      HTML代码:

      <img  class="box lazy" src="/static/imghwm/default1.png" data-src="url" alt="What is the use of v-bind in vue" >

      查看页面截图:

      What is the use of v-bind in vue

      【相关推荐:vuejs视频教程web前端开发

      The above is the detailed content of What is the use of v-bind in vue. For more information, please follow other related articles on the PHP Chinese website!

      Statement
      The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
      Vue常见面试题汇总(附答案解析)Vue常见面试题汇总(附答案解析)Apr 08, 2021 pm 07:54 PM

      本篇文章给大家分享一些Vue面试题(附答案解析)。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

      5 款适合国内使用的 Vue 移动端 UI 组件库5 款适合国内使用的 Vue 移动端 UI 组件库May 05, 2022 pm 09:11 PM

      本篇文章给大家分享5 款适合国内使用的 Vue 移动端 UI 组件库,希望对大家有所帮助!

      聊聊vue指令中的修饰符,常用事件修饰符总结聊聊vue指令中的修饰符,常用事件修饰符总结May 09, 2022 am 11:07 AM

      本篇文章带大家聊聊vue指令中的修饰符,对比一下vue中的指令修饰符和dom事件中的event对象,介绍一下常用的事件修饰符,希望对大家有所帮助!

      如何覆盖组件库样式?React和Vue项目的解决方法浅析如何覆盖组件库样式?React和Vue项目的解决方法浅析May 16, 2022 am 11:15 AM

      如何覆盖组件库样式?下面本篇文章给大家介绍一下React和Vue项目中优雅地覆盖组件库样式的方法,希望对大家有所帮助!

      通过9个Vue3 组件库,看看聊前端的流行趋势!通过9个Vue3 组件库,看看聊前端的流行趋势!May 07, 2022 am 11:31 AM

      本篇文章给大家分享9个开源的 Vue3 组件库,通过它们聊聊发现的前端的流行趋势,希望对大家有所帮助!

      react与vue的虚拟dom有什么区别react与vue的虚拟dom有什么区别Apr 22, 2022 am 11:11 AM

      react与vue的虚拟dom没有区别;react和vue的虚拟dom都是用js对象来模拟真实DOM,用虚拟DOM的diff来最小化更新真实DOM,可以减小不必要的性能损耗,按颗粒度分为不同的类型比较同层级dom节点,进行增、删、移的操作。

      VSCode插件分享:一个实时预览Vue/React组件的插件VSCode插件分享:一个实时预览Vue/React组件的插件Mar 17, 2022 pm 08:07 PM

      在VSCode中开发Vue/React组件时,怎么实时预览组件?本篇文章就给大家分享一个VSCode 中实时预览Vue/React组件的插件,希望对大家有所帮助!

      手把手带你使用Vue + Laravel开发一个简单的 CRUD 应用手把手带你使用Vue + Laravel开发一个简单的 CRUD 应用Apr 15, 2022 pm 08:55 PM

      本篇文章给大家分享一个Vue+Laravel开发教程,介绍一下怎么使用 Vue.js 和 Laravel 共建一个简单的 CRUD 应用,希望对大家有所帮助!

      See all articles

      Hot AI Tools

      Undresser.AI Undress

      Undresser.AI Undress

      AI-powered app for creating realistic nude photos

      AI Clothes Remover

      AI Clothes Remover

      Online AI tool for removing clothes from photos.

      Undress AI Tool

      Undress AI Tool

      Undress images for free

      Clothoff.io

      Clothoff.io

      AI clothes remover

      AI Hentai Generator

      AI Hentai Generator

      Generate AI Hentai for free.

      Hot Article

      R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
      3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
      R.E.P.O. Best Graphic Settings
      3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
      R.E.P.O. How to Fix Audio if You Can't Hear Anyone
      3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

      Hot Tools

      Atom editor mac version download

      Atom editor mac version download

      The most popular open source editor

      Dreamweaver CS6

      Dreamweaver CS6

      Visual web development tools

      Dreamweaver Mac version

      Dreamweaver Mac version

      Visual web development tools

      Notepad++7.3.1

      Notepad++7.3.1

      Easy-to-use and free code editor

      MinGW - Minimalist GNU for Windows

      MinGW - Minimalist GNU for Windows

      This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.