uniapp数据双向绑定使用
文章描述：
uniapp数据双向绑定以及使用方法
单个
template
<template>
<view class="content">
<view class="title">{{title}}</view>
<view class="item">
<input @input="change" type="text" :value="title" />
</view>
</view>
</template>script
export default {
data() {
return {
title:'666666'
}
},
methods: {
change(e){
var txtTitle = e.detail.value;
this.title = txtTitle;
console.log(txtTitle);
}
}
}style
.content{
padding: 20upx 34upx;
}
.item{
border: 1upx solid #eee;
margin-bottom: 10upx;
}
.item input{
padding: 20upx 20upx;
}
.title{
font-size: 24upx;
padding: 10upx 0;
}
多个
template
<template>
<view class="content">
<view class="item" v-for="(item,index) in list">
<input @input="change" type="text" :value="item.title"
:data-index="index"/>
</view>
</view>
</template>script
var _self;
export default {
data() {
return {
list:[
{id:1,title:"111"},
{id:2,title:"222"},
{id:3,title:"333"},
{id:3,title:"444"},
{id:3,title:"555"}
],
}
},
onLoad() {
_self = this;
},
methods: {
change(e){
console.log(e)
var index = e.currentTarget.dataset.index;
_self.list[index].title = e.detail.value;
console.log(_self.list)
}
}
}
禁止双向绑定
let obj = JSON.parse(JSON.stringify(data));
发布时间：2021/12/08
发表评论