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

首先，谢邀。

根据你的描述，是希望后台只存状态值，然后将对应状态值的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'
  ]

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

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

Answer 2

谢邀。

你这个问题问的就不专业... 你标题想问checkbox.radio，内容里面的代码却是 select下拉框。

而且这个是及其基础的问题。
如果值1，值2是后台提供的，你怎么可能不进行查询呢？
其实道理一样，你在前端请求后台拿到数据之后，再去渲染页面。

Answer 3

如果了解后端，就该知道后台的数据应该是kv数组。输出给前端方便的方式也是kv对象。

渲染模板的时候，直观感觉应该是如下代码：

<select class="form-control" id="db">
    <option v-for="(title, name) in databases" value="{{name}}">{{title}}</option>
</select>

然后，你会发现value原样的输出了{{name}}。

通过查看官方文档，发现如果想输出变量到属性中，需要用到v-bind（简写:attr）。改写如下：

<select class="form-control" id="db">
    <option v-for="(title, name) in databases" :value="name">{{title}}</option>
</select>

var app = new Vue({

el: '#db_selecter',
data: {
    databases: {test: 'testv', test2: 'test2v'}
},
methods: {
    refreshDatabases: function(){
        this.databases = ['loading']; //  value是0
        var self = this;
        setTimeout(function(){
            self.databases = {
                r1: "r1v",
                r2: "r2v"
            }
        }, 1000);
    }
}

})

我也第二天用vue。。。估计这是你要的效果~