v-bind指令

最新推荐文章于 2022-11-06 18:58:48 发布

ytllll

最新推荐文章于 2022-11-06 18:58:48 发布

阅读量269

点赞数

分类专栏： Vue3 文章标签： vue js

本文链接：https://blog.csdn.net/weixin_43350210/article/details/117913522

版权

v-bind指令用于动态绑定属性，常用于绑定图片的src、链接的href以及动态class和style。本文将详细讲解v-bind动态绑定class和style的两种语法——对象语法和数组语法。

摘要由CSDN通过智能技术生成

v-bind

v-bind指令：
- 作用：动态绑定属性
- 缩写：: (语法糖，就是一个冒号：)
- 预期：any (with argument) | Object (without argument)
- 参数：attrOrProp (optional)
v-bind用于绑定一个或多个属性值，或者向另一个组件传递props值
在开发中，有许多属性需要动态进行绑定的：
- 比如图片的链接src、网站的链接href、动态绑定一些类、样式等等

  <div id="app">

  </div>
  <!-- vue2 tmeplate模板中只能有一个根元素 -->
  <!-- vue3 是允许template中有多个根元素 -->
  <template id="my-app">
    <!-- v-bind的基本使用 -->
    <img v-bind:src="imgUrl" alt="">
    <a v-bind:href="link">百度一下</a>

    <!-- v-bind的语法糖‘ : ’ -->
    <img :src="imgUrl" alt="">
  </template>

  <SCript src="../js/vue.js"></SCript>
  <SCript>
    const App = {
     
      template:'#my-app',
      data() {
     
        return {
     
          imgUrl:"https://avatars.githubusercontent.com/u/65051919?s=60&v=4",
          link:"http://www.baidu.com"
        }
      }
    }

    Vue.createApp(App).mount('#app')
  </SCript>