vue data中的return使用方法示例
更新时间：2022年07月28日 16:00:47 作者：世间美好与你
当一个组件被定义,data必须声明为返回一个初始数据对象的函数,因为组件可能被用来创建多个实例,下面这篇文章主要给大家介绍了关于vue data中return使用,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
一、vue 里面的data return 是什么？
uniapp项目 vue 结构中data 里面的return详解
从字面上理解 data 是数据的意思 return是返回的意思,我个人理解的是 将数据返回出去。
二、如何使用
1.vue 双向绑定 v-model
代码如下（示例）：
<template>
<view>
<input type="text" v-model="reac" placeholder="请输入内容">
</view>
</template>
<script>
export default {
data() {
return {
reac:''
}
},
methods: {
}
}
</script>
<style>
</style>
其中v-model里面的内容要放到return里面才可以,否则页面会报错,放到进去之后也方便我们更好的去取值
this.reac就能获取到我们输入的值了
2.带有 ":"的属性 比如:class、:id等等
这些属性对应的值都需要放在
return里面,
代码如下（示例）：
<template>
<view>
<view :class="font">6666</view>
</view>
</template>
<script>
export default {
data() {
return {
font:'font'
}
},
onLoad() {
},
methods: {
}
}
</script>
<style>
.font{
color: #4CD964;
font-size: 50rpx;
}
</style>
我们看到 :class里面的值是font.因此我们需要在return里面定义一下这个属性 格式是font:'font" font属性的值可以自定义 然后将定义好的class类名在下面style里面写样式即可
tips: 一般情况下动态样式建议使用 :class
3. 标签使用return里面的属性
语法 {{return对应的属性}} 他会将属性里面的值赋给当前标签
代码如下(示例)
<template>
<view>
<view>{{text}}</view>
</view>
</template>
<script>
export default {
data() {
return {
text:'小楼今夜月重圆，环文万象无雕镌，要院落花帘不卷，加拜王门最好官，油云讵比长沙远'
}
},
methods: {
}
}
</script>
<style>
</style>
补充：vue中的data为什么会使用return函数
vue中的data为什么会用return函数
如果不使用return包裹的数据会在项目的全局中可见，会造成变量污染；
使用return包裹后数据中变量只在当前组件中生效，不会影响其他组件。
组件是一个可复用的vue实例，如果data是一个普通的对象，那么所有复用这个实例的组件都将引用同一份数据，会造成数据污染。
如果将data封装成一个函数，实例化组件时只是调用了这个函数生成的副本，避免了数据污染。
总结
到此这篇关于vue data中的return使用方法的文章就介绍到这了,更多相关vue data中return用法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
Vue 是如何将一份模板转换为真实的 DOM 节点的,又是如何高效地更新这些节点的呢,这些都离不开虚拟dom这个概念,下面我们就来了解下虚拟dom这个概念以及它是什么吧2024-01-01
这篇文章主要介绍了在vue里添加好看的lottie动画效果的方法，在vue中引入lottie非常简单,需要的朋友可以参考下2018-08-08
这篇文章主要介绍了vue中将html字符串转换成html后遇到的问题小结,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2018-12-12
本篇文章主要介绍了详解从新建vue项目到引入组件Element的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
最近遇到这样的需求输入连号事件,需要在表格中输入物流单号,物流号码,生成的数量,名称,点击确定自动生成固定数量的连号物流单号,本文重点介绍vue3输入单号和张数,自动生成连号的单号,感兴趣的朋友一起看看吧2024-02-02
这篇文章主要为大家详细介绍了Vue自定义省市区三级联动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要给大家介绍了关于vue打包上传服务器刷新404问题的两种方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-04-04
ant design vue 表格table 默认勾选几项的操作
这篇文章主要介绍了ant design vue 表格table 默认勾选几项的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
这篇文章主要为大家详细介绍了Vuex实现购物车小功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-08-08
vue el-form-item如何添加icon和tooltip
这篇文章主要介绍了vue el-form-item如何添加icon和tooltip问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
最新评论