Day8——v-bind的基本使用

落日映苍穹つ 2023-02-27 10:41 37阅读 0赞

### 文章目录 ###

*  一. 回顾
 *  二. v-bind介绍
 *   *  2.1 v-bind使用的情景
     *  2.2 v-bind的语法
     *  2.3 例子

# 一. 回顾 #

前面学习了[Day7——v-once、v-html、v-text、v-pre指令的使用][Day7_v-once_v-html_v-text_v-pre]，今天学习v-bind的基本使用

# 二. v-bind介绍 #

## 2.1 v-bind使用的情景 ##

除了将数据动态显示出来，有时候我们也需要**对标签的某些属性进行动态设置**。比如我想要动态展示图片，那么`<img>`的src属性就需要动态绑定值了，再比如动态设置`<a>`的href属性。

**总结：v-bind的作用就是动态绑定属性**

## 2.2 v-bind的语法 ##

基本语法：`v-bind:属性=“值”`（注意，值 不需要用mustache语法`{ {变量}}`，直接写`变量`即可）  
语法糖：`:属性=“值”`，语法糖就是简单的写法，提高写代码的速度以及代码的可读性

## 2.3 例子 ##

<div id="app">
      
      <img v-bind:src="imgUrl" alt="">
      <a v-bind:href="aHref">百度一下</a>
      
      <img :src="imgUrl" alt="">
      <a :href="aHref">百度一下</a>
    
    </div>
    <script src="../js/vue.js"></script>
    <script> const app = new Vue({ el: '#app', data: { message: '你好啊', //imgUri的值是网上随便搜的一张图片的url值 imgUrl: 'https://img10.360buyimg.com/imgzone/jfs/t1/40389/30/14719/506416/5d5a8a91E82132130/4c1d26255a2d0edf.jpg', aHref: 'http://www.baidu.com' } }) </script>

效果:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70]

[Day7_v-once_v-html_v-text_v-pre]: https://blog.csdn.net/qq_40634846/article/details/107400182
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70]: /images/20230209/1848f650580541b9b56e60190a0c748c.png