vue基础指令

数据渲染

对比 {{}} , v-text, v-html的区别

具体代码

页面效果

代码解析:

<!-- v-text 会将元素原本的内容覆盖 -->
<h3 v-text="message">借问妹纸何处有?</h3> 

<!-- v-text的值实质是js变量,而非字符串,因此可以执行表达式 -->
<h3 v-text="title + message">借问妹纸何处有?</h3>

<!-- {{}} 仅是渲染数据,并不会覆盖原来的数据 -->
<h3> {{ message }}借问妹纸何处有?</h3> 

<!-- 只是渲染文本,不会解析html -->
<h3 v-text="html_message"></h3>

<!-- 会对html进行解析 -->
<h3 v-html="html_message"></h3>

属性绑定

v-bind 用于对html标签的属性进行值绑定,可缩写为 :

具体代码

页面效果

代码解析:

<div>
    <!-- link只是字符串 -->
    <a href="link" v-text="title"></a>
</div>
<div>
    <!-- link是vm实例中的变量 -->
    <a v-bind:href="link" v-text="title"></a>
</div>
<div>
    <!-- v-bind的缩写 -->
    <a :href="link"><img :src="img" alt=""></a>
</div>

绑定事件

v-on绑定js中的事件,缩写形式为@

具体代码

v-on效果

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏张善友的专栏

Miguel de Icaza 细说 Mix 07大会上的Silverlight和DLR

Mono之父Miguel de Icaza 详细报道微软Mix 07大会上的Silverlight和DLR ,上面还谈到了Mono and Silverligh...

2997
来自专栏Ceph对象存储方案

Luminous版本PG 分布调优

Luminous版本开始新增的balancer模块在PG分布优化方面效果非常明显,操作也非常简便,强烈推荐各位在集群上线之前进行这一操作,能够极大的提升整个集群...

3675
来自专栏杨龙飞前端

scrollto 到指定位置

2954
来自专栏java 成神之路

使用 NIO 实现 echo 服务器

5577
来自专栏pangguoming

Spring Boot集成JasperReports生成PDF文档

由于工作需要,要实现后端根据模板动态填充数据生成PDF文档,通过技术选型,使用Ireport5.6来设计模板,结合JasperReports5.6工具库来调用渲...

1.4K7
来自专栏转载gongluck的CSDN博客

cocos2dx 打灰机

#include "GamePlane.h" #include "PlaneSprite.h" #include "BulletNode.h" #include...

7206
来自专栏跟着阿笨一起玩NET

c#实现打印功能

3712
来自专栏C#

DotNet加密方式解析--非对称加密

    新年新气象,也希望新年可以挣大钱。不管今年年底会不会跟去年一样,满怀抱负却又壮志未酬。(不过没事,我已为各位卜上一卦,卦象显示各位都能挣钱...)...

5968
来自专栏张善友的专栏

LINQ via C# 系列文章

LINQ via C# Recently I am giving a series of talk on LINQ. the name “LINQ via C...

3015
来自专栏落花落雨不落叶

canvas画简单电路图

84911

扫码关注云+社区