vue data中的return使用方法示例_vue.js_

一、vue 里面的data return 是什么？

uniapp项目 vue 结构中data 里面的return详解

从字面上理解 data 是数据的意思 return是返回的意思,我个人理解的是 将数据返回出去。

二、如何使用

1.vue 双向绑定 v-model

代码如下（示例）：

其中v-model里面的内容要放到return里面才可以,否则页面会报错,放到进去之后也方便我们更好的去取值this.reac就能获取到我们输入的值了

2.带有 ":"的属性 比如:class、:id等等

这些属性对应的值都需要放在return里面,

代码如下（示例）：

我们看到 :class里面的值是font.因此我们需要在return里面定义一下这个属性 格式是font:'font" font属性的值可以自定义 然后将定义好的class类名在下面style里面写样式即可

tips: 一般情况下动态样式建议使用 :class

3. 标签使用return里面的属性

语法 {{return对应的属性}} 他会将属性里面的值赋给当前标签

代码如下(示例)

补充：vue中的data为什么会使用return函数

vue中的data为什么会用return函数

如果不使用return包裹的数据会在项目的全局中可见，会造成变量污染；

使用return包裹后数据中变量只在当前组件中生效，不会影响其他组件。

组件是一个可复用的vue实例，如果data是一个普通的对象，那么所有复用这个实例的组件都将引用同一份数据，会造成数据污染。

如果将data封装成一个函数，实例化组件时只是调用了这个函数生成的副本，避免了数据污染。

总结

到此这篇关于vue data中的return使用方法的文章就介绍到这了,更多相关vue data中return用法内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！