在 SegmentFault，解决技术问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
一线的工程师、著名开源项目的作者们，都在这里：
获取验证码
已有账号？
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
请问有没有办法将
&div class="form-group" v-for="item in items" &
&ui-input v-if="item.type=='text'"&&/ui-input&
&ui-radio v-else="item.type=='radio'"&&/ui-radio&&/div&
这边的判断通过js判断来实现组件的渲染呢
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
这种想法是不对的。你用v-for遍历items，遍历几次会判断几次是否是input或者radio。
如果想动态渲染组件，请使用。
下面是我帮你完善的例子：
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：vue.js中v-for的使用及索引获取
时间： 14:06:44
&&&& 阅读：1240
&&&& 评论：
&&&& 收藏：0
标签：&&&&&&&&&&&&&&&&&&&&&&&&&&&1.v-for
　　直接上代码。
　　示例一：
&!DOCTYPE html&
&meta charset="utf-8"&
&meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /&
&title&&/title&
&div id="didi-navigator"&
&li v-for="tab in tabs"&
{{ tab.text }}
&script src="js/vue.js" type="text/javascript" charset="utf-8"&&/script&
&script type="text/javascript"&
el: ‘#didi-navigator‘,
{ text: ‘巴士‘ },
{ text: ‘快车‘ },
{ text: ‘专车‘ },
{ text: ‘顺风车‘ },
{ text: ‘出租车‘ },
{ text: ‘代驾‘ }
　　在&v-for&块内我们能完全访问父组件作用域内的属性，另有一个特殊变量&$index，正如你猜到的，它是当前数组元素的索引：
&ul id="example-2"&
&li v-for="item in items"&
{{ parentMessage }} - {{ $index }} - {{ item.message }}
var example2 = new Vue({
el: ‘#example-2‘,
parentMessage: ‘Parent‘,
{ message: ‘Foo‘ },
{ message: ‘Bar‘ }
　　另外，你可以为索引指定一个别名（如果&v-for&用于一个对象，则可以为对象的键指定一个别名）：
&div v-for="(index, item) in items"&
{{ index }} {{ item.message }}
&　　从 1.0.17 开始可以使用&of&分隔符，更接近 JavaScript 遍历器语法：
&div v-for="item of items"&&/div&
　　示例二：
&!DOCTYPE html&
&meta charset="utf-8"&
&meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /&
&title&&/title&
&li v-for="option in options"&
&p class="text-success" v-on:click="getIndex($index)"&Text:{{option.text}}--Vlue:{{option.value}}&/p&
&div v-if="isNaN(click)==false"&
&span&你点击的索引为: {{ click }}&/span&
&div v-else&
&p class="text-danger"&试着点击上方LI条目&/p&
&script src="js/vue.js" type="text/javascript" charset="utf-8"&&/script&
&script type="text/javascript"&
el: ‘body‘,
click: ‘a‘,
options: [
{ text: ‘上海市‘, value: ‘<span style="background-color: #f5f5f5; color: #‘ },
{ text: ‘湖北省‘, value: ‘<span style="background-color: #f5f5f5; color: #‘ },
{ text: ‘河南省‘, value: ‘<span style="background-color: #f5f5f5; color: #‘ },
{ text: ‘北京市‘, value: ‘<span style="background-color: #f5f5f5; color: #‘ }
getIndex:function($index){
this.click=$
3.在点击事件中取到索引
　　方法一：添加自定义属性
　　示例三：
&!DOCTYPE html&
&meta charset="UTF-8"&
&title&&/title&
&style type="text/css"&
a{display: block;}
&a v-for="(index,item) in items" data-index="{{index}}" v-on:click="onclick" href=""&{{ item.text }}&/a&
&input type="text" name="" id="index" value=""/&
&script src="js/vue.js" type="text/javascript" charset="utf-8"&&/script&
&script type="text/javascript"&
el: ‘body‘,
{ text: ‘巴士‘ },
{ text: ‘快车‘ },
{ text: ‘专车‘ },
{ text: ‘顺风车‘ },
{ text: ‘出租车‘ },
{ text: ‘代驾‘ }
methods: {
onclick:function(event){
event.preventDefault();
let target = event.target
console.log(target.getAttribute("data-index"));
document.getElementById(‘index‘).value = target.getAttribute("data-index");
　　方法二：直接传入索引值
　　示例四（和二差不多）：
&!DOCTYPE html&
&meta charset="UTF-8"&
&title&&/title&
&style type="text/css"&
a{display: block;}
&a v-for="(index,item) in items" v-on:click="onclick($index)" href="#"&{{ item.text }}&/a&
&input type="text" name="" id="index" value=""/&
&script src="js/vue.js" type="text/javascript" charset="utf-8"&&/script&
&script type="text/javascript"&
el: ‘body‘,
{ text: ‘巴士‘ },
{ text: ‘快车‘ },
{ text: ‘专车‘ },
{ text: ‘顺风车‘ },
{ text: ‘出租车‘ },
{ text: ‘代驾‘ }
methods: {
onclick:function(index){
index.preventDefault();
console.log(index);
document.getElementById(‘index‘).value =
　　效果与方法一相同。
　　不过有链接时：
　　与取索引虽然不冲突，但是如果要对所跳的链接做进一步操作，则无法阻止跳转事件：
　　如果想直接传索引可以用以下方法：
　　示例五：
&!DOCTYPE html&
&meta charset="UTF-8"&
&title&&/title&
&style type="text/css"&
a{display: block;}
&a v-for="(index,item) in items" v-on:click="onclick($index)" href="javascript:void(0)"&{{ item.text }}&/a&
&input type="text" name="" id="index" value=""/&
&script src="js/vue.js" type="text/javascript" charset="utf-8"&&/script&
&script type="text/javascript"&
el: ‘body‘,
{ text: ‘巴士‘ },
{ text: ‘快车‘ },
{ text: ‘专车‘ },
{ text: ‘顺风车‘ },
{ text: ‘出租车‘ },
{ text: ‘代驾‘ }
methods: {
onclick:function(index){
index.preventDefault();
console.log(index);
document.getElementById(‘index‘).value =
window.location.href = "";
　　有更好的写法欢迎指教。
&标签：&&&&&&&&&&&&&&&&&&&&&&&&&&&
&&国之画&&&& &&&&chrome插件&&
版权所有 京ICP备号-2
迷上了代码！在 SegmentFault，解决技术问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
一线的工程师、著名开源项目的作者们，都在这里：
获取验证码
已有账号？
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
请问下面两个代码，为什么第二个代码无法正常运行
&template v-for="branch in branches"&
&input type="radio"
:id="branch"
:value="branch"
name="branch"
v-model="activeBranch"&
&label :for="branch"&{{ branch }}&/label&
&/template&
&input type="radio"
v-for="branch in branches"
:id="branch"
:value="branch"
name="branch"
v-model="activeBranch"&
&label :for="branch"&{{ branch }}&/label&
还有两个不明白的：
&selector v-for="branch in branches" :branch="branch"&&/selector&
&message v-for="ciinfo in ciinfos" :ciinfo="ciinfo"&&/message&
ponent('message', {
props: ['ciinfo'],
template: `&li&
&p& {{ciinfo.sha}} {{ ciinfo.message }}&/p&
&p&by {{ ciinfo.name }} at {{ ciinfo.date }}&/p&
ponent('selector', {
props: ['branch'],
template: `&input type="radio"
:id="branch"
:value="branch"
name="branch"&
&label :for="branch"&{{ branch }}&/label&
结果selector，报错了：warn — vue.js:513[Vue warn]: Component template should contain exactly one root element请问为什么啊，感觉完全一样啊，branches和ciinfos都是两个数组
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
第二个的branch压根没在v-for的作用域内。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
模板只能有一个根对象
`ponent('selector', {
props: ['branch'],
template: &input type="radio"
:id="branch"
:value="branch"
name="branch"&
&label :for="branch"&{{ branch }}&/label&
那么这里就出现问题了 &input&一个标签 label一个标签
该答案已被忽略，原因：
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：Vue.js，在table标签中使用template标签在ie10、ie11中不能正常渲染？ - 知乎3被浏览2453分享邀请回答1添加评论分享收藏感谢收起codepen.io/clumiere/pen/PZemXO34 条评论分享收藏感谢收起写回答