Uni-app初体验(页面绑定数据)

2021/9/27 23:13:20

本文主要是介绍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初体验(页面绑定数据)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程