java - vue.js如何写checkbox.radio?

问题描述

问 题

我想用vue写checkbox.radio，这个怎么做呢
vue版本2.X
java springmvc

正常情况下会生成如下格式

<select>
    <option value>值1</option>
    <option value>值2</option>
</seltct>

一般情况下数据库里面放的是状态码 1,2。
而前台展示的时候显示的是值1，值2。
我如何直接输出值1，值2呢，我不想在后台进行值查询可以吗？
以前的JSP都是写个tag,直接把值转成html,现在vue我不知道怎么办了

解决方案

首先，谢邀。

根据你的描述，是希望后台只存状态值，然后将对应状态值的content存在js的某个角落，当你需要渲染的时候，再根据对应状态值，取出对应的content渲染到页面

由于这种一般都是后台返回，但是这里根据需求你也许可以这么做

• 先在data中(或者写一个store文件按顺序专门存放这些内容)

options: [
    '我是1',
    '我是2',
    '我是3',
    '我是4',
    '我是5',
    '我是6',
    '我是7',
    '我是8',
    '我是9',
    '我是10',
]

• 然后你可以在data里写一个接受后台传来的状态值

option_values: [
    0,
    2,
    4
]

• 根据这些在页面上渲染效果

<select>
      <option value='item' v-for='item in option_values'>{{options[item]}}</option>
</select>

最终效果

不过，也不是什么好办法，因为对数组来说索引只能事数字了，就局限了状态值的类型。以上是一种解决办法。

---

那么考虑到状态值的多样化，该怎么做呢，讲数组转化为对象写法
将上述第一步改为键值对形式

  options: {
    'option1':'我是1',
    'option2':'我是2',
    'option3':'我是3',
    'option4':'我是4',
    'option5':'我是5',
    'option6':'我是6',
    'option7':'我是7',
    'option8':'我是8',
    'option9':'我是9',
    'option10':'我是10',
  }

这么写的话原本我们传来只能是数字类型的状态值就可以很自然的变为

  option_values: [
    'option1',
    'option3',
    'option9'
  ]

这样也能保证状态值的多样化。

最后建议，以后这种内容不对题的问题还是少些比较好，看下社区的规范有助于你快速找到答案。再次谢邀，希望可以帮到你，或者为你提供一些新的思路

这篇关于java - vue.js如何写checkbox.radio?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！