DOM操作

2020-12-29 10:53 更新

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

操作获取DOM元素

  1. <template>
  2. <view class='content'>
  3. <input id='num' type='number' autofocus/>
  4. </view>
  5. </template>
  6. <script>
  7. export default {
  8. name: 'api-test',
  9. apiready(){
  10. var num = $('#num').value;
  11. // var num = document.getElementById('num').value;
  12. console.log('input value: ' + num);
  13. }
  14. }
  15. </script>
  16. <style>
  17. .content{
  18. height: 100px;
  19. }
  20. </style>

获取DOM元素并调用组件API

  1. <template>
  2. <view class='content'>
  3. <list-view id='list' >
  4. <cell>
  5. <text>{item.title}</text>
  6. </cell>
  7. </list-view>
  8. </view>
  9. </template>
  10. <script>
  11. export default {
  12. name: 'api-test',
  13. apiready(){
  14. var _data = ['一', '二', '三', '四'];
  15. var listview = $('#list');
  16. listview.load({
  17. data: _data
  18. });
  19. }
  20. }
  21. </script>
  22. <style>
  23. .content{
  24. height: 100px;
  25. }
  26. </style>

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

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

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号