vue常用指令(v-bind)

一、v-bind 指令

作用:
- 设置元素的属性（比如:src,title,class）

二、代码演示

1、设置元素的src

代码

<!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

修改代码

<!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>

测试结果

在这里插入图片描述

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

3、设置元素的class

代码修改

<!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>