v-bind 例子冒号：

原创已于 2023-09-01 16:46:22 修改 · 201 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

于 2023-08-30 15:37:21 首次发布

web_html 专栏收录该内容

86 篇文章

订阅专栏

本文通过HTML和Vue.js的v-bind指令，展示了如何在网页中动态绑定图片src和alt属性，以及如何使用Vue的数据驱动特性来改变图片内容。

v-bind 例子

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <div id="app">
    <img src="./imgs/10-02.png" alt="" title="hello 波仔">
    <img v-bind:src="imgUrl" alt="" v-bind:title="msg">
    <img :src="imgUrl" alt="" :title="msg">
    <img src="./imgs/10-02.png" alt="">

  </div>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.14/vue.js"></script>

  <script>

    const app = new Vue({
      el: '#app',
      data: {
        imgUrl: './imgs/10-02.png',
        msg: 'Hello 波仔'
      },

    })
  </script>
</body>

</html>