vue data中的return使用方法示例

目录
  • 一、vue 里面的data return 是什么？
  • 二、如何使用
    • 1.vue 双向绑定 v-model
    • 2.带有 ":"的属性 比如:class、:id等等
    • 3. 标签使用return里面的属性
  • 补充：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用法内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue实例中data使用return包裹的方法

    在简单的vue实例中看到的Vue实例中data属性是如下方式展示的: let app= newVue({ el:"#app", data:{ msg:'' }, methods:{ } }) 在使用组件化的项目中使用的是如下形式: export default{ data(){ return { showLogin:true, // def_act: '/A_VUE', msg: 'hello vue', user:'', homeContent: false, } }, method

  • vue里的data要用return返回的原因浅析

    官网的示例 var vm = new Vue({ el: '#example', data: { message: 'Hello' } }); 项目中的写法 data() { return { message: 'Hello' } } 为什么要把data变成函数并return属性呢? 组件是一个可复用的实例,当你引用一个组件的时候,组件里的data是一个普通的对象,所有用到这个组件的都引用的同一个data,就会造成数据污染. 将data封装成函数后,在实例化组件的时候,我们只是调用了data函数

  • vue data中的return使用方法示例

    vue data中的return使用方法示例

    目录 一.vue 里面的data return 是什么? 二.如何使用 1.vue 双向绑定 v-model 2.带有 ":"的属性 比如:class.:id等等 3. 标签使用return里面的属性 补充:vue中的data为什么会使用return函数 总结 一.vue 里面的data return 是什么? uniapp项目 vue 结构中data 里面的return详解 从字面上理解 data 是数据的意思 return是返回的意思,我个人理解的是 将数据返回出去. 二.如何使用

  • Vue中使用Teleport的方法示例

    Vue中使用Teleport的方法示例

    目录 正文 Teleport 在 Vue 中的使用 禁用 Teleport 标签 正文 通常,当我们在 Vue 中创建组件时,它们出现在我们期望的 DOM 结构中.但是,有时我们并不希望如此.一个很好的例子就是模态框——通常,模态框应该出现在页面上所有内容的顶部——所以如果我们在逻辑上在具体的组件中创建它,它可能会出现在某些 HTML 元素后面或需要一些奇怪的 CSS 样式让它达到顶部. 幸运的是,在 Vue 中有一种简单的方法可以解决这个问题,称为. 标签允许我们在组件中定义一些东西,然后在代

  • 在VUE style中使用data中的变量的方法

    最近项目中的公共组件,在复用的时候,针对不同的场景,需要不断变更CSS里样式的值,而且已经有了全局的公共组件样式了 如果用vue传统的动态绑定class和style的方式去修改样式(文末会提到),需要额外写很多变量和模块class,那如果我的样式的值,可以从父组件,传到子组件,子组件根据传入值去渲染对应样式的值,其实就是要再style中使用data和props中的变量,这要怎么做呢? 其实很简单,只需要三步,大家来看: 1.HTML结构 <Upload ref="upload"

  • vue组件中使用iframe元素的示例代码

    本文介绍了vue组件中使用iframe元素的示例代码,分享给大家,具体如下: 需要在本页面中展示vue组件中的超链接,地址栏不改变的方法: <template> <div class="accept-container"> <div class="go-back" v-show="goBackState" @click="goBack">GoBack</div> <ul&g

  • Vue 项目中Echarts 5使用方法详解

    Vue 项目中Echarts 5使用方法详解

    目录 前言 创建项目 基本使用 安装 使用方法 柱状图 动态排序柱状图 前言 Echarts 是一个纯JavaScript的图表库,兼容绝大部分的浏览器,底层依赖轻量级的canvas类库ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表. 创建项目 先使用vue-cli创建一个新的项目,配置按照自己的需要选择,默认的也可 vue create vue_echarts cd vue_echarts npm run serve 基本使用 安装 首先安装echarts npm i

  • Vue项目中设置背景图片方法

    在Vue项目开发中我们经常要向页面中添加背景图片,可是当我们在样式中添加了背景图片后,编译打包后,配置到服务器上时,由于路径解析的问题,图片并不能够正确的显示出来,如下CSS样式: background:url("../../assets/head.jpg"); 这个时候我们就要考虑使用其他的方式了,node中提供了一种比较有效的方式来解决这个问题: 1.在data中定义如下: export default { name: 'productdetailspage', data() {

  • vue组件中的数据传递方法

    Vue 的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据.必须使用特定的方法才能实现组件之间的数据传递.组件之间传递数据大致分为三种情况: 父组件向子组件传递数据,通过 props 传递数据. 子组件向父组件传递数据,通过 events 传递数据. 两个同级组件之间传递数据,通过 event bus 传递数据. 一.父组件向子组件传递数据 子组件部分: <template> <div class="child"> {{ msg }} </

  • vue项目中使用Svg的方法

    github demo: github地址 闲聊背景 本文主要以 vue-cli3 搭建的项目为例,来聊一下如何在项目中更优雅的使用 svg . 众所周知, vue-cli3 已经推出很长一段时间了,大家可以感受一下 vue-cli3 带来的零配置体验.But,也相应带来了一些弊端,就是如归需要修改默认的 loader 时,会比较麻烦. 们接下来主要使用的就是上文中提到的 svg 的 use ,先上一张 vue-cli3 搭建的项目的目录,可以看到根目录下只保留了 public/ 以及 src/

  • Vue自动构建发布脚本的方法示例

    简介 使用cross-env, scp2两个插件完成 cross-env cross-env这是一款运行跨平台设置和使用环境变量的脚本. 为什么需要cross-env? NODE_ENV=production 像这样设置环境变量时,大多数Windows命令提示符都会阻塞 .(Windows上的Bash是例外,它使用本机Bash.)同样,Windows和POSIX命令使用环境变量的方式也有所不同.对于POSIX,您可以使用: $ENV_VAR 和在Windows上可以使用 %ENV_VAR% .

  • SpringBoot中整合MyBatis-Plus的方法示例

    MyBatis 框架相信大家都用过,虽然 MyBatis 可以直接在 xml 中通过 SQL 语句操作数据库,很是灵活.但正其操作都要通过 SQL 语句进行,就必须写大量的 xml 文件,很是麻烦.于是 MyBatis-Plus 应运而生,作为 MyBatis 的增强工具,更是为我们开发效率得到了质的飞跃. 一.简介 1.MyBatis MyBatis 是一款优秀的持久层框架,它支持自定义 SQL.存储过程以及高级映射.MyBatis 免除了几乎所有的 JDBC 代码以及设置参数和获取结果集的工

随机推荐