给元素动态绑定属性或事件

当为元素绑定属性或者事件时,可以直接指定属性的名称和事件的名称,像下面这样:

<div title="直接指定属性-字符串">直接指定属性-字符串</div>
<div :title="msg">直接指定属性-变量</div>
<div @click="dianji($event)">直接指定事件</div>

这样就为元素直接指定了title属性和click事件

动态绑定

也可以通过变量的方式,为元素动态指定要绑定的属性名称或者事件名称

<div :[attrName1]="'我就试试title: ' + msg">动态title</div>   // 其中 '我就试试title:' 是字符串,'msg' 是定义的变量,绑定了title属性
<div :[attrName2]="'red'">动态class</div> // 因为是动态绑定,所以把 red 加了单引号,把他变成了一个字符串,绑定了class属性
<div :[attrName2]="className">动态class</div> // className 是定义的变量,绑定了class属性
<div @[eventName]="dianji($event)">点击</div> // 绑定了 mouseover 属性

msg: "直接指定属性-变量",
eventName: 'mouseover', // click,mouseover
attrName1: 'title', // title, id, class
attrName2: 'class',
className: 'red',

这样就可以为元素动态绑定属性或者事件了