<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>Vue</title> <script src="https://www.hxstrive.com/cdn/libs/vue/2.7.16/vue.min.js"></script> </head> <body> <div id="app"> <!-- 注意:这里也有一个坑,因为在 HTML 属性中并不区分大小写, 所以 attributeName 会被解析为 attributename, 如果在 data 中定义为 attributeName 会取不到值而报错 (在脚手架环境可以直接使用 attributeName) --> <a v-bind:[attributeName]="url"> 动态参数1 {{attributename}} </a> <br/> <a v-on:[eventName]="doSomething"> 动态参数2 {{eventname}} </a> <br/> <a v-on:[eventname2]="doSomething"> 动态参数3 {{eventname}} </a> </div> <script type="text/javascript"> var app = new Vue({ el: "#app", data: { url: "http://www.hxstrive.com", // eventName: 'click', 错误写法,见“对动态参数表达式的约束” eventname: 'click', // attributeName: 'href' 错误写法,见“对动态参数表达式的约束” attributename: 'href' }, computed: { eventname2: function(){ return ["cli", "c", "k"].join(""); } }, methods:{ doSomething: function(){ alert("doSomething"); } } }); </script> </body> </html>
在线代码编辑器
HTML / CSS / JavaScript 实时预览
更多工具
运行
保存
自动执行
模板
JS 库
清空
主题
代码编辑区
字符数: 0
提示: 输入完整的 HTML 代码,需包含 DOCTYPE 声明与 html 根标签
预览效果
选择模板
取消
选择库和版本
库
版本
文件
取消
已复制到剪贴板