提示:以下是本篇文章正文内容,下面案例可供参考
一、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>
芜湖~