Uni-app初体验（页面绑定数据）

本文主要是介绍Uni-app初体验（页面绑定数据），对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

template中：

<template>
    <view class="content">
        <image class="logo" src="/static/logo.png"></image>
        <view class="text-area">
            <text class="title">{{title}}</text>
            <input :value="title" @input="changeWords"/>
        </view>
    </view>
</template>

添加一个input标签，:value会监控data()里面的值，并给自身赋初始值。那么一开始输入框的值就是title的值。

@input表示监听输入时间，调用方法。

<script>
    //ViewModel 协调者调度器
    export default {
        //Model  所有的数据
        data() {
            return {
                title: '阿杜的处子秀'
            }
        },
        onl oad() {

        },
        methods: {
            changeWords(e){
                var words=e.detail.value;
                this.title=words;
            }
        }
    }
</script>

在methods写入方法。当输入值就改变title的值，由于是双向绑定，所以本身的标题也会随着输入改变。

这篇关于Uni-app初体验（页面绑定数据）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！