查看“Vue从入门到实战:指令”的源代码
←
Vue从入门到实战:指令
跳转至:
导航
,
搜索
因为以下原因,您没有权限编辑本页:
您所请求的操作仅限于该用户组的用户使用:
用户
您可以查看与复制此页面的源代码。
指令是带有v-前缀的特殊属性,其值限定为单个表达式。指令的作用是,当表达式的值发生改变时,将这个变化反映到DOM上。 例如,下面代码中v-if指令根据表达式show的值决定是否插入还是删除<nowiki><p></nowiki>元素。 <nowiki><p v-if="show">你能看见我吗?</p></nowiki> 此外,一些指令还可以带有参数,如v-bind,v-on指令 v-bind用于响应式的更新HTML属性,v-on指令用于监听DOM事件。 <nowiki><a v-bind:href="url">中国水利水电出版社</a> <button v-on:click="sayGreet">Greet</button></nowiki> 从Vue2.6开始,指令的参数可以是动态参数,示例如下: <nowiki><a v-bind:{{attribute}}="url">新浪网</a></nowiki> 这里的attribute会被作为一个Javascript对象进行动态求值。 在DOM中使用模板时,还需要避免使用大写字符来命名动态参数。这是因为浏览器会把元素的属性名全部强制转换为小写字符。 <nowiki><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hello Vue.js</title> </head> <body> <!--View--> <div id="app"> <a v-bind:[attributeName] ="url">新浪网</a> <a v-bind:['hr' + param]="url">新浪网</a> </div> <script src="vue.js"></script> <script> var vm = new Vue({ el: '#app', data: { attributeName: "href", param: "ef", url: "http://www.sina.com.cn/" } }) </script> </body> </html> </nowiki> 会曝出错误: <nowiki> [Vue warn]: Property or method "attributename" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property</nowiki>
返回至
Vue从入门到实战:指令
。
导航菜单
个人工具
登录
命名空间
页面
讨论
变种
视图
阅读
查看源代码
查看历史
更多
搜索
导航
首页
最近更改
随机页面
帮助
工具
链入页面
相关更改
特殊页面
页面信息