指令本质是属性
作用过程:当表达式的值有所改变,使DOM也发生相应的改变
directives attribute
参数:
位置是指令在指令后
形式是 :args
动态参数:
注意,参数表达式的写法存在一些约束,如之后的“对动态参数表达式的约束”章节所述。
<a v-bind:[attributeName]="url"> ... </a>
attributeName是一个表达式,进一步计算后成为结果。
<a v-on:[eventName]="doSomething"> ... </a>
当 eventName
的值为 "focus"
时,v-on:[eventName]
等价于 v-on:focus
动态参数有两种形态:第一种是表象,也就是看到的那样;第二种是计算后的结果,结果会产生作用。
形式上要合乎语法。某些字符,如空格和引号,放在HTML attribute名中无效。
<!-- 这会触发一个编译警告 -->
<a v-bind:['foo' + bar]="value"> ... </a>
结果一般为字符串,异常时为null(可以被显性地用于移出绑定),值为其它的非字符串型时会触发一个警告。
在 DOM 中使用模板时 (直接在一个 HTML 文件里撰写模板),还需要避免使用大写字符来命名键名,因为浏览器会把 attribute 名全部强制转为小写:
<!-- 在 DOM 中使用模板时这段代码会被转换为 `v-bind:[someattr]`。 除非在实例中有一个名为“someattr”的 property,否则代码不会工作。 -->
<a v-bind:[someAttr]="value"> ... </a>
修饰符