uni-app点击按钮动态添加标签

要在uni-app中点击按钮动态添加标签，你可以使用以下步骤：

1. 在页面中定义一个变量来存储标签列表，比如：`tags: []`。
2. 在按钮的点击事件中，使用`this.tags.push(newTag)`向标签列表中添加新的标签，其中`newTag`是一个包含标签信息的对象。
3. 在模板中使用`v-for`指令遍历标签列表，并将每个标签渲染为一个元素。

以下是一个简单的示例代码：

<template>
  <view>
    <button @click="addTag">添加标签</button>
    <view v-for="(tag, index) in tags" :key="index">
      {{ tag.name }}
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tags: []
    };
  },
  methods: {
    addTag() {
      const newTag = {
        name: "新标签"
      };
      this.tags.push(newTag);
    }
  }
};
</script>

在上面的示例中，点击添加标签按钮后，会向标签列表中添加一个名为“新标签”的标签，并将其渲染为一个`<view>`元素。你可以根据自己的需求调整代码。

相关问题

uni-app picker

### 实现和自定义Picker选择器

#### 使用`uni-data-picker`组件

为了使`uni-data-picker`正常工作并能够清除已选中的值，需确保添加了`v-model`绑定属性。此属性并未在官方文档示例中显示出来，但是它是必要的[^1]。

<template>
  <view>
    <!-- 级联选择器 -->
    <uni-data-picker v-model="selectedValue" :localdata="optionsData" popup-title="请选择选项"
      @change="handleChange"></uni-data-picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      selectedValue: '', // 绑定的选择项模型
      optionsData: [] // 数据源数组
    };
  },
  methods: {
    handleChange(e) { }
  }
};
</script>

对于希望实现多级联动效果的情况，可以通过设置`:localdata`来传递树形结构的数据给`uni-data-picker`，从而让用户可以选择至任意级别的节点[^2]。

#### 自定义时间段选择器

创建一个基于弹出窗口的时间段选择器涉及到几个方面的工作：

- **引入外部插件**：可以从DCloud扩展市场获取适合的popup组件，例如ID为2716的插件[^4]。

- **构建UI界面**：设计好触发弹窗按钮以及内部布局样式。

- **处理逻辑交互**：编写JavaScript代码控制何时展示/隐藏弹框，并同步所做更改回父页面状态。

下面是一个简单的例子说明如何仅使用一列作为选择列表的方式：

<!-- 时间段选择器模板部分 -->
<button type="button" @click="togglePopup">选择时段</button>
<u-popup v-if="isShowPopup" position="bottom">
  <picker mode="selector" range-key="name" :range="timeSlots" @change="handleTimeChange"/>
</u-popup>

// 脚本部分
import uPopup from 'path_to_popup_component';

export default {
  components: { uPopup },
  data() {
    return {
      isShowPopup: false,
      timeSlots: [
        { name: "上午", value: "am" },
        { name: "下午", value: "pm" }
      ]
    };
  },
  methods: {
    togglePopup() {
      this.isShowPopup = !this.isShowPopup;
    },
    handleTimeChange(event) {}
  }
}

通过上述方法可以灵活调整以适应不同的业务需求场景下的时间范围选取功能开发。

#### 完全定制化的二级Picker

当需要更复杂的双栏或多栏联合筛选时，则可能需要用到完全手写的解决方案。这里给出了一种方式用来表示两个关联字段之间的关系[^5]。

<template>
  <div class="custom-picker">
    {{arrDate[0][dateIndex]}} - {{arrDate[1][dateIndexOne]}}
    
    <select v-for="(item, index) in arrDate" :key="index" @input="updateSelection(index)">
      <option v-for="(value, i) in item" :key="i">{{value}}</option>
    </select>
  </div>
</template>

<script>
export default {
  data(){
    return{
      dateIndex: null,
      dateIndexOne: null,
      arrDate:[
        ['周一','周二'],
        ['早上','晚上']
      ]
    }
  },
  methods:{
    updateSelection(idx){
      const target=this.$event.target;
      if (idx===0)this.dateIndex=target.selectedIndex;
      else this.dateIndexOne=target.selectedIndex;
    }
  }
}
</script>

这段代码展示了怎样利用原生HTML `<select>`标签配合Vue.js事件监听机制完成基本的双向绑定操作，进而达到动态更新视图的效果。

购物车 uni-app

### 创建购物车子分支

为了专门开发购物车相关的功能，在本地基于 `master` 分支创建并切换到名为 `cart` 的子分支：

git checkout -b cart

此命令有助于保持项目的版本控制整洁有序[^1]。

### 配置Vuex Store

在 `main.js` 文件中，通过如下方式配置 Vuex store 并将其挂载至 Vue 实例上：

// 导入 store 的实例对象
import store from './store/store.js'

const app = new Vue({
  ...App,
  // 将 store 挂载到 Vue 实例上
  store,
})

app.$mount()

这一步骤确保整个应用可以访问共享的状态管理仓库[^2]。

### 设置Store Modules

接着，在 `store.js` 中定义模块化的状态存储结构，并引入特定于购物车的功能模块：

import Vue from 'vue'
import Vuex from 'vuex'
// 导入购物车的 vuex 模块
import moduleCart from './cart.js'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    // 挂载购物车的 vuex 模块，调整其命名空间为 m_cart
    m_cart: moduleCart,
  },
})

export default store

上述代码片段展示了如何将购物车逻辑封装成独立模块以便管理和维护[^3]。

### 开发购物车UI组件

对于前端界面部分，通常会涉及到商品展示区、数量增减按钮以及总价计算等交互元素。考虑到跨平台的一致性和用户体验优化，建议采用官方推荐的最佳实践来构建这些组件。具体来说，可以通过 `<template>` 标签编写 HTML 结构；利用 CSS 或者框架自带样式库美化页面布局；最后借助 JavaScript 处理事件响应和数据绑定。

#### 商品列表渲染

假设有一个简单的商品列表模板用于呈现待购商品信息：

<view class="goods-list">
  <block v-for="(item, index) in goodsList" :key="index">
    <view class="good-item">
      <!-- 显示图片 -->
      <image :src="item.image"></image>
      
      <!-- 描述文字 -->
      <text>{{ item.name }}</text>

      <!-- 单价 -->
      <text>￥{{ item.price.toFixed(2) }}</text>

      <!-- 加减控件 -->
      <button @click="decreaseQuantity(index)">-</button>
      <input type="number" v-model.number="item.quantity"/>
      <button @click="increaseQuantity(index)">+</button>
    </view>
  </block>
</view>

这段代码实现了动态加载商品详情，并提供了修改购买量的操作入口。

#### 计算总金额

为了让用户清楚知道当前订单总额，可以在方法区内添加辅助函数来进行实时更新：

computed: {
  totalPrice() {
    return this.goodsList.reduce((total, good) => total + (good.price * good.quantity), 0).toFixed(2);
  }
}

该表达式遍历所有已选中的商品条目，累加它们的价格乘以对应的数量得到最终数值。

#### 提交订单处理

当顾客确认结算时，则需调用相应接口提交所选购的商品清单给服务器端做进一步验证与保存动作。这里省略实际网络请求细节，仅给出伪代码示意：

methods: {
  submitOrder() {
    if (!this.checkout()) return;
    
    console.log('模拟发送订单...');
    setTimeout(() => alert(`成功下单！应付金额：${this.totalPrice}元`), 500);

    // 清空购物车内物品
    this.clearCart();
  },

  clearCart() {
    this.$store.commit('m_cart/clear');
  }
}

以上就是关于 uni-app 下实现购物车功能的一个简化版介绍[^4]。