vue常用指令(v-bind)

一、v-bind 指令

  • 作用:
    • 设置元素的属性 (比如:src,title,class)

二、代码演示

1、设置元素的src

  1. 代码

    <!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">
          <!-- 使用v-bind设置src属性值 -->
          <img v-bind:src="imgSrc" />
        </div>
      </body>
    
      <script src="js/vue.min.js"></script>
      <script>
        var Vm = new Vue({
          el: "#app",
          data: {
            imgSrc: "./img/测试图片.jpeg",
          },
          methods: {},
        });
      </script>
    </html>
    
    

2、v-bind可以简写为: , 设置元素的title

  1. 修改代码

    <!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">
          <!-- 使用v-bind设置src属性值 -->
          <!-- <img v-bind:src="imgSrc" /> -->
    
          <img :src="imgSrc" :title="imgTitle" />
        </div>
      </body>
    
      <script src="js/vue.min.js"></script>
      <script>
        var Vm = new Vue({
          el: "#app",
          data: {
            imgSrc: "./img/测试图片.jpeg",
            imgTitle: "测试图片",
          },
          methods: {},
        });
      </script>
    </html>
    
    
  2. 测试结果

vue常用指令(v-bind)_第1张图片

如图,鼠标停滞会显示标题

3、设置元素的class

  1. 代码修改

    <!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">
         <!-- 使用v-bind设置src属性值 -->
         <!-- <img v-bind:src="imgSrc" /> -->
    
         <!-- 简写 设置title -->
         <!-- <img :src="imgSrc" :title="imgTitle" /> -->
    
         <!-- 设置class -->
         <input type="button" value="字体变大" @click="changeFont" /><br />
         <div :style="{fontSize: size + 'px'}">v-bind测试</div>
       </div>
     </body>
    
     <script src="js/vue.min.js"></script>
     <script>
       var Vm = new Vue({
         el: "#app",
         data: {
           imgSrc: "./img/测试图片.jpeg",
           imgTitle: "测试图片",
           size: 30,
         },
         methods: {
           changeFont: function () {
             this.size++;
           },
         },
       });
     </script>
    </html>
    
    
  2. 测试结果

    vue常用指令(v-bind)_第2张图片

你可能感兴趣的:(vue,vue.js,javascript,前端)