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 横竖屏问题


下一篇:uni-app 实现无限级树形结构组件,面包屑类型导航等功能