Vue-5- 模板语法 -2

2022 年 6 月 10 日
本文字数：664 字
阅读完需：约 2 分钟

续上节，我们可以通过模板语法接收 Vue 的数据渲染，也可以通过 Vue 的指令实现不同类型的数据渲染和 HTML 属性的动态修改。

例：按钮的条件使能

假设，目前有一个需求是某个按钮需要根据某个字段的值进行使能和禁用。

代码

HTML 代码

 <div id="app5">        <button v-bind:disabled="yy">{{ msg }}</button>    </div>

复制代码

JS 代码

var msg='点我'        var app5 =new Vue({            el: '#app5',            data: {                yy: 'true',                msg: msg                }        })

复制代码

页面效果

修改 Vue 实例的 yy 值为 false：

`Vue` 指令的缩写

v-作为 Vue 专属的视觉提示，用来标识 Vue 接管的元素，当你熟悉了 Vue 特性和项目全部在使用 Vue 前段框架的时候，我们可以使用 Vue 指令的缩写来简化代码。

`v-bind` 缩写

缩写格式：:

<!-- 完整语法 --><a v-bind:href="url">...</a>
<!-- 缩写 --><a :href="url">...</a>
<!-- 动态参数的缩写 (2.6.0+) --><a :[key]="url"> ... </a>

复制代码

`v-on` 缩写

缩写格式：@

<!-- 完整语法 --><a v-on:click="doSomething">...</a>
<!-- 缩写 --><a @click="doSomething">...</a>
<!-- 动态参数的缩写 (2.6.0+) --><a @[event]="doSomething"> ... </a>

复制代码

在上面的动态参数缩写示例中，当 event 的值为 "focus" 时，@:[event] 将等价于 v-on:focus，即：当元素被聚焦时触发 doSomething。

Tip

Vue 也支持了 js 在模板语法中的执行。
Vue 可以让我们对 HTML 元素的属性，比如 ID，URl，Class 等属性进行灵活的按需修改。

以上就是今天的全部内容了，感谢您的阅读，我们下节再会。

发布于: 刚刚阅读数: 5

原文链接:【http://xie.infoq.cn/article/c727896c22213b68ae31c0989】。文章转载请联系作者。

Python研究所

关注

公众号:Python研究所 2018.10.14 加入

云原生领域技术分享。

发布

暂无评论

创作场景

Vue-5- 模板语法 -2

例：按钮的条件使能

代码

页面效果

Vue 指令的缩写

v-bind 缩写

v-on 缩写

Tip

Python研究所

评论

`Vue` 指令的缩写

`v-bind` 缩写

`v-on` 缩写