前端根据数据库的数据改变现实的内容,查询根据下拉框value值查询

function filters (列名) {

      let txt = ''

      // eslint-disable-next-line camelcase

      switch (列名) {

        case '判断1':

          txt = '显示的值'

          break

        case '判断2':

          txt = '显示的值'

          break

        case '判断3':

          txt = '显示的值'

          break

      }

      return txt

    }

要想查询的话,首先在查询接口那里写

searchCode.value.列名= 列名.value.value

在最后的return里这样写

options: [

        { label: '显示的数据1', value: 后台的数据1 },

        { label: '显示的数据2', value: 后台的数据2 },

        { label: '显示的数据3', value: 后台的数据3 }

      

      ],

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
在Vue中查询数据库获取分类下拉框,需要借助于后端技术实现。下面以Spring Boot和MySQL为例,提供一个简单的实现方案。 1. 创建Category实体类 首先,我们需要创建一个Category实体类,用于映射数据库中的分类表。可以使用JPA或者MyBatis等框架来实现,这里以JPA为例: ```java @Entity @Table(name = "category") public class Category { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Long id; private String name; // getter和setter方法省略 } ``` 2. 创建CategoryRepository接口 接下来,我们需要创建一个CategoryRepository接口,用于定义查询分类数据的方法。可以使用Spring Data JPA来实现,代码如下: ```java public interface CategoryRepository extends JpaRepository<Category, Long> { @Query("SELECT c FROM Category c") List<Category> findAllCategories(); } ``` 3. 创建CategoryController类 再接下来,我们需要创建一个CategoryController类,用于接收前端请求并返回分类数据。代码如下: ```java @RestController @RequestMapping("/api/categories") public class CategoryController { @Autowired private CategoryRepository categoryRepository; @GetMapping("/list") public List<Category> getCategoryList() { return categoryRepository.findAllCategories(); } } ``` 4. 在Vue中调用接口获取分类数据 最后,在Vue中调用接口获取分类数据并显示在下拉框中。可以使用axios来发送请求,代码如下: ```javascript <template> <div> <select v-model="selectedCategory"> <option v-for="category in categories" :value="category.id">{{ category.name }}</option> </select> </div> </template> <script> import axios from 'axios'; export default { data() { return { categories: [], selectedCategory: null, }; }, mounted() { axios.get('/api/categories/list') .then(response => { this.categories = response.data; }) .catch(error => { console.log(error); }); }, }; </script> ``` 上面的代码中,我们通过axios发送了一个GET请求,请求后端接口/api/categories/list,获取分类数据并将其赋给categories数组。然后,使用v-for指令遍历categories数组,将每个分类显示在下拉框中。当用户选择某个分类时,selectedCategory变量的会发生改变

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

梦深时有鹿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值