uniapp 动态创建元素多种方法

在uniapp中，动态创建元素有多种方法，具体如下：

1. **使用`v-for`指令**：
`v-for`指令是Vue.js中用于遍历数组或对象的指令，可以在模板中动态生成元素。

   <template>
     <view v-for="(item, index) in items" :key="index">
       {{ item }}
     </view>
   </template>

   <script>
   export default {
     data() {
       return {
         items: ['Item 1', 'Item 2', 'Item 3']
       }
     }
   }
   </script>

2. **使用`$createElement`方法**：
通过`render`函数和`$createElement`方法可以在JavaScript中动态创建元素。

   <template>
     <div>
       <child-component></child-component>
     </div>
   </template>

   <script>
   export default {
     mounted() {
       const h = this.$createElement;
       const child = h('p', 'Hello, dynamic element!');
       this.$children[0].$el.appendChild(child);
     }
   }
   </script>

3. **使用`document.createElement`方法**：
在uniapp中，可以通过`document.createElement`方法在原生JavaScript中创建元素，然后将其添加到页面中。

   <template>
     <view id="container"></view>
   </template>

   <script>
   export default {
     mounted() {
       const container = document.getElementById('container');
       const newElement = document.createElement('view');
       newElement.textContent = 'Hello, dynamic element!';
       container.appendChild(newElement);
     }
   }
   </script>

4. **使用`uni.createSelectorQuery`方法**：
`uni.createSelectorQuery`方法可以用于获取元素的引用，然后通过`append`方法动态添加元素。

   <template>
     <view id="container"></view>
   </template>

   <script>
   export default {
     mounted() {
       const query = uni.createSelectorQuery().in(this);
       query.select('#container').boundingClientRect((rect) => {
         const newElement = document.createElement('view');
         newElement.textContent = 'Hello, dynamic element!';
         document.getElementById('container').appendChild(newElement);
       }).exec();
     }
   }
   </script>

这些方法各有优缺点，具体使用哪种方法取决于实际需求和场景。