动态参数-优快云博客

本文链接：https://blog.youkuaiyun.com/jdrunk/article/details/103627903

本文深入探讨了Vue.js中动态参数与指令的应用，包括v-bind和v-on的使用方法，以及如何通过动态参数实现元素特性的动态绑定和事件监听。同时，文章还讲解了动态参数的求值过程及约束条件，帮助读者更好地理解和运用Vue.js的动态特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、参数
一些指令能够接受一个‘参数’，在指令名称之后以冒号表示。

<a v-bind:href='url' target="_blank">百度一下，你就知道</a>

在这里href是参数，告知v-bind指令将钙元素的href特性与表达式url的值绑定

<p v-on:click='something'>点击我</p>

v-on指令，用于监听dom指令
2、动态参数
（1）

<a v-bind:[attr]='url' target="_blank">百度一下，你就知道</a>

这里attr会被作为一个javascript表达式进行动态求值，求得的值将会作为最终的参数使用。
如

data(){
	return{
		sttr:'href',    //即v-bind:[attr]等价于:herf
		url:'baidu.com'
	}
}

（2）

 <p v-on:[eventName]='something'>点击我</p>

动态修改样式

data(){
	return{
		sttr:'click'
	}
},
 methods:{
        something(){
            let p= event.currentTarget;        //定义被点击事件
            p.style.color='blue';          //修改被点击事件的样式
            console.log(event.currentTarget)      //<p style='color:blue;'>点击我</p>
            console.log('点击我！')
        }          
    }

（3）对动态参数的值的约束
动态参数预期会求出一个字符串，异常情况下值为 null。这个特殊的 null 值可以被显性地用于移除绑定。任何其它非字符串类型的值都将会触发一个警告。
（4）对动态参数表达式的约束
动态参数表达式有一些语法约束，因为某些字符，如空格和引号，放在 HTML attribute 名里是无效的。

<!-- 这会触发一个编译警告 -->
<a v-bind:['foo' + bar]="value"> ... </a>

变通的办法是使用没有空格或引号的表达式，或用计算属性替代这种复杂表达式。
在 DOM 中使用模板时 (直接在一个 HTML 文件里撰写模板)，还需要避免使用大写字符来命名键名，因为浏览器会把 attribute 名全部强制转为小写