Vue中数据绑定的示例分析-创新互联

{{ if(msg == '1') return time }}

{{ formatTime(time) }}

我们拿第一个问题举例实践一下：

需要在标签内部进行某种 "骚操作"。

这里我们就根据 isDark的值来确定时间显示的背景色吧

当 isDark为 true 的时候，背景色变成黑色，文字变成白色。

当 isDark为 false的时候，背景色变成白色，文字变成黑色。

先来定义 isDark:

data() {
  return {
   msg: 'hello vue',
   time: new Date(),
   isDark: False
  }
 }

然后添加一下两种条件下的样式：

接下来给 h2标签加上绑定指令：

{{ formatTime(time) }}

效果如下：

我们将 isDark 的值修改成 true：

很完美的达到了所需求的效果。

这就是指令的魅力。

最后一个问题

上述两个指令解决了我们最初提出来三个问题中的两个，那么剩下一个呢？

需要渲染一个数组。

当我们需要渲染表格的时候就会遇到这个场景，如何去渲染一个数组呢？模板语法又并不支持这么复杂的操作。

请出本章最后一个指令：

v-for

嗯，还是很形象。js里面也有 for 嘛~

先看看它是做什么的：

v-for 会为数据源（绑定的列表）中的每一项，生成一个同类的标签。

然后看看怎么用，这里用 a 标签做说明，其他标签类似：

{{ 别名.字段 }}



{{ 别名.字段 }}

因为新版本的 vue要求使用 v-for指令渲染的标签必须绑定一个key用做唯一标识，大多数情况下我们可以直接使用下标来进行标识

继续使用我们之前的代码进行演示，先定义一个 url的数组：

data() {
  return {
   msg: 'hello vue',
   time: new Date(),
   isDark: true,
   urlList: [
    {
     text: '链接1',
     url: '#1'
    },

    {
     text: '链接2',
     url: '#2'
    },

    {
     text: '链接3',
     url: '#3'
    }
   ]
  }
 }

然后渲染安排一波：

{{item.text}}

效果如下：

渲染的结果是三个 a 标签，非常正确~

很完美的解决了最后一个问题。

还有些什么指令呢？

官方还有其他的指令，这里再提一个：

v-on

v-on 指令可以绑定事件，比如说按钮的点击事件。

像上面切换背景的例子中，可以通过一个按钮的点击事件来修改 isDark的值，从而控制背景的改变。就不需要每次都手动来修改下 isDark的值了。

以上是“Vue中数据绑定的示例分析”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联成都网站设计公司行业资讯频道！

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。