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

Question

我想用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我不知道怎么办了

Answer 1

First of all, thank you for the invitation.

According to your description, you want to save only the status value in the background, and then store the content corresponding to the status value in a corner of js. When you need to render, you can take out the corresponding content and render it to the page based on the corresponding status value

Since this is usually a background return, you may be able to do this depending on your needs

• First in the data (or write a store file to specifically store these contents in order)

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

• Then you can write a status value in the data to accept the status value sent from the background

option_values: [
    0,
    2,
    4
]

• Render effects on the page based on these

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

Final effect

However, this is not a good idea, because for arrays, indexes can only be numbers, which limits the type of state values. The above is a solution.

---

So considering the diversification of state values, what should we do? Let’s talk about converting arrays into objects
Change the above first step to the form of key-value pairs

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

If you write it like this, the status value that we originally passed can only be of numeric type can be naturally changed into

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

This also ensures the diversity of status values.

Finally, it’s better to have fewer questions with inappropriate content in the future. Checking the community’s rules will help you find answers quickly. Thank you again for the invitation, I hope I can help you, or help you提供一些新的思路

Answer 2

Thanks for the invitation.

The question you asked is unprofessional... Your title is asking about checkbox.radio, but the code in the content is a select drop-down box.

And this is a very basic question.
If value 1 and value 2 are provided by the background, how could you not query them?
In fact, the principle is the same. After you request the data from the background at the front end, you can then render the page.