DOM操作

2020-12-29 10:53 更新

avm.js在提供数据绑定和状态管理驱动界面更新的基础上,同时支持document以及类似jquery方式使用$函数获取和操作真实DOM。

操作获取DOM元素

<template>  
    <view class='content'>
        <input id='num' type='number' autofocus/>
    </view>  
</template>  
<script>
    export default {  
        name: 'api-test',
        apiready(){
            var num = $('#num').value;
            // var num = document.getElementById('num').value;
            console.log('input value: ' + num);
        }
    }
</script>
<style>
    .content{
        height: 100px;
    }
</style>

获取DOM元素并调用组件API

<template>  
    <view class='content'>
        <list-view id='list' >
            <cell>
                <text>{item.title}</text>
            </cell>
        </list-view>
    </view>  
</template>  
<script>
    export default {  
        name: 'api-test',
        apiready(){
            var _data = ['一', '二', '三', '四'];
            var listview = $('#list');
            listview.load({
                data: _data
            });
        }
    }
</script>
<style>
    .content{
        height: 100px;
    }
</style>

其中,listview.load接口请参考list-view组件api文档。

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号