专栏首页大数据Vue.js常见问题精选(一)

Vue.js常见问题精选(一)

一、数据绑定不一定就是使用双大括号 “{{}}” 语法

我们都知道,Vue.js 最常见的数据绑定方式是使用“Mustache”语法(双大括号),AngularJs和微信小程序都是如此,但是需要注意的是,在 Vue.js 中双大括号可不能随便乱用,否则可能导致语法错误。

通常情况下,在下面几种情况中不能使用双大括号语法进行数据绑定:

1. 标签属性值的绑定

对于标签属性值的数据绑定,我们可以使用Vue.js提供的 指令,该指令用法很简单,直接在需要进行数据绑定的属性名前加上 即可,当然也可直接简写为 。例如:

从上面这个简单例子可以看出,在 a 标签中的文本内容可以使用双大括号语法来进行数据绑定,而其标签上的属性 则需要写成 或 。

2. HTML代码的绑定

如果想要将HTML代码通过数据绑定方式渲染于页面中,我们不能直接通过双大括号语法进行绑定,否则会当做普通文本内容渲染,而是要使用 指令进行绑定。还是上面那个例子,我们把内容换成HTML代码:

结果页面上直接把代码给渲染出来了:

要想在页面中显示真正的文字加粗效果,HTML部分得像下面这么写:

这才是我们最终想要实现的效果。

二、开发过程中最好使用未压缩的Vue.js版本,否则没有错误代码提示三、v-for 指令不一定只是对数组进行循环,还可以直接循环数字

例如,我们需要循环显示从 1 到 10 这十个数,可以这样来写:

最终生成的代码:

本文来自企鹅号 - 前端微站媒体

我来说两句

0 条评论
登录 后参与评论

相关文章

  • XSStrike:基于Python的XSS测试工具

    简介 XSStrike 是一款用于探测并利用XSS漏洞的脚本 XSStrike目前所提供的产品特性: 对参数进行模糊测试之后构建合适的payload 使用pay...

    企鹅号小编
  • 别@微信团队了,我用Python给自己戴上了圣诞帽!

    引言 大家纷纷@官方微信 给自己的头像加上一顶圣诞帽。当然这种事情用很多P图软件都可以做到。但是作为一个学习图像处理的技术人,还是觉得我们有必要写一个程序来做这...

    企鹅号小编
  • Bootstrap HTML编码规范

    语法 用两个空格来代替制表符(tab) -- 这是唯一能保证在所有环境下获得一致展现的方法。 嵌套元素应当缩进一次(即两个空格)。 对于属性的定义,确保全部使用...

    企鹅号小编
  • 洛谷P2818 天使的起誓

    题目描述 Tenshi非常幸运地被选为掌管智慧之匙的天使。在正式任职之前,她必须和其他新当选的天使一样要宣誓。宣誓仪式是每位天使各自表述自己的使命,他们的发言稿...

    attack
  • 记录虚拟机下安装jdk下遇到的问题及解决方案

    自己搭了一个虚拟机要开始搞事情,然后就是装jdk了,本来以为很简单的东西,没想到在这还能碰上坑。

    我的小熊不见了丶
  • Python3学习笔记 | 十四、Python的语句与语法-if语句

    在Python里,if语句是选取要执行的操作。这个是在Python里主要的选择工具,代表Python程序所拥有的大多数逻辑。在之前章节也使用过,但是在整个过程中...

    TeamsSix
  • SAP UI5 get route - local version VS central version

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    Jerry Wang
  • object address data read debug

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

    Jerry Wang
  • customizing download - debug in CRM

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

    Jerry Wang
  • button Show most popular product

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

    Jerry Wang

扫码关注云+社区

领取腾讯云代金券