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

这篇文章主要为大家展示了“Vue中数据绑定的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Vue中数据绑定的示例分析”这篇文章吧。

创新互联是专业的岭东网站建设公司,岭东接单;提供成都做网站、网站设计,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行岭东网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

为什么绑定

简单的数据渲染,包括表达式、函数在内。其实都只是在标签中渲染,如果遇到以下情况怎么办呢:

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

需要控制流来控制不同数据下的不同渲染效果。

需要渲染一个数组。

这时候简单渲染就不能很好的解决问题了,怎么办 ?

来一发数据绑定吧!

绑定是什么

在了解绑定是什么之前,先了解一下什么是指令:

在 " vue" 中,指令是带有 v- 前缀的特殊属性,用来修饰标签的(自定义组件在这里也统一归为标签,因为其使用方式和原生标签一样),其值的约束和模板语法一样,支持表达式、变量。

指令会监测其值的变化,并将其的变化反应给所处的DOM

我们来看一下上一章最后的例子:

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

在这里我们是想利用控制流来控制是否显示时间,但是很遗憾,模板语法并不支持js语法。

但是 " vue" 中有这样一个指令来弥补模板语法不支持 js语法的遗憾:

v-if

下面看看修改后的代码:

{{ formatTime(time) }}

先将 msg的值赋值为1

Vue中数据绑定的示例分析

然后再修改一下 msg的值看看:

Vue中数据绑定的示例分析

什么也没有显示,因为我们 msg的值并不是 1

v-if 指令很完美的解决了我们最开始提出来的第二个问题:

需要控制流来控制不同数据下的不同渲染效果。

让我们回到最开始的话题。

这就是指令,而在官方原生的指令中,有一个指令是专门用来绑定标签属性的:

v-bind

命名很形象,bind 直译就是绑定的意思。

如何绑定

这里利用 div标签展示一下 v-bind 的使用方式,用在其它标签上同理:

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

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

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

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

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

先来定义 isDark:

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

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

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

{{ formatTime(time) }}

效果如下:

Vue中数据绑定的示例分析

我们将 isDark 的值修改成 true:

Vue中数据绑定的示例分析

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

这就是指令的魅力。

最后一个问题

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

需要渲染一个数组。

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

请出本章最后一个指令:

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}}

效果如下:

Vue中数据绑定的示例分析

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

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

还有些什么指令呢?

官方还有其他的指令,这里再提一个:

v-on

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

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

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

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


分享题目:Vue中数据绑定的示例分析-创新互联
文章源于:http://pwwzsj.com/article/dooodg.html

其他资讯