Vue3模板语法--动态参数
原创
可以在指令参数中使用 JavaScript 表达式，方法是用方括号括起来：
<!-- 注意，参数表达式的写法存在一些约束，如之后的“对动态参数表达式的约束”章节所述。 -->
<a v-bind:[attributeName]="url"> ... </a>这里的 attributeName 会被作为一个 JavaScript 表达式进行动态求值，求得的值将会作为最终的参数来使用。例如，如果你的组件实例有一个 data property attributeName，其值为 "href"，那么这个绑定将等价于 v-bind:href。
同样地，你可以使用动态参数为一个动态的事件名绑定处理函数：
<a v-on:[eventName]="doSomething"> ... </a>在这个示例中，当eventName的值为"focus"时，v-on:[eventName]将等价于v-on:focus
example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-----使用Vue3,首先要引入Vue ---这个做法有点类似与jQuery或其他js库的用法----->
<script src="https://unpkg.com/vue@3"></script>
<style>
.red{color: red;}
.blue{color:blue}
</style>
</head>
<body>
<div id="lio">
<!--插值表达式，绑定变量-->
<!--{{content}}
{{sky}}
{{num}}-->
<!----v-on:click表示绑定事件---->
<!--<span v-bind:class="color">789</span>-->
<span v-on:[fn]="toRed" v-bind:class="color">666</span>
<span v-bind:[sky]='content'></span><br/>
<button v-on:click="change">go!</button>
<button v-on:click="toMouseOver">mouseover</button>
</div>
<br/><br/>
<script>
Vue.createApp({ /*---Vue的createApp方法，可以放入数据池与事件池，data是数据池，methods是事件池---*/
"data":function(){ /* 变量池 */
return{
content:"Vue3" , /* 自定义的变量 */
"sky":"kkk",
color:"",
"fn":"click"
}
},
"methods":{ /* 事件池 */
"change":function(){
this.sky="mmm"
// var _this=this;
//setInterval(function(){
// _this.num++;
// },1000);
//alert(1);
//console.log(this)
//this.content='hi Vue3',
//this.sky="hahaha"
},
"toRed":function(){
this.color="red"
},
"toMouseOver":function(){
this.fn="mouseover"
},
b:function(){
alert(2);
}
}
}).mount("#lio");/*---mount（）方法指定挂载元素，只会挂载符合条件的第一个元素--*/
</script>
</body>
</html>以上是Vue3模板语法中动态参数完整的代码实例。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
腾讯云开发者
