Vue学习（二）动态绑定与事件监听

v-bind&v-on

Day1

---

---

前言

此文章根据官方文档及些网络资料编写，仅供个人使用。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、V-bind

介绍：
V-bind可绑定一个或多个属性值，同时也支持对象或数组绑定。

缩写：:

1.简单实现

  <div id="app">
    <img v-bind:src="imgURL">
    <a v-bind:href="aHref">CSDN</a>
    <br>
    <!--语法糖/缩写的写法-->
    <img :src="imgURL">
    <a :href="aHref">CSDN</a>
  </div>
  <script>
    const app = new Vue({
    
      el: '#app',
      data: {
    
        imgURL: 'img/1.gif',
        aHref: 'https://www.csdn.net/'
      }
    })
  </script>

2.Class的绑定

2.1对象绑定

我们在动态绑定的时候，一般前面是给一个类名，后面跟一个布尔值，通过布尔值控制样式

<<h2 v-bind:class={key：value}>>
<h2 v-bind:class={类名：布尔值}>

通过变量控制的，一般是把变量放在下面data里面。
第10行可以理解为：class="active:true" 只有当为true的时候文字才会变红

  <style>
    .active {
    
      color: red;
    }
  </style>
<div id="app">
  <h2>{
  {message}}</h2>
</div>
  <div id="app