<html>
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<title>component-4</title>
</head>
<body>
<h1>component-4</h1>
<hr>
<div id="app">
<child v-for="(value,key) in list" :key="key" @click="childClick(key)"></child>
</div>
<script type="text/javascript">
Vue.component('child', {
template: '<div style="color:red" @click="setAdd">{{value}}</div>',
data: function () {
return {
value: 1
}
},
methods: {
setAdd: function () {
this.value += 1
this.$emit('click')
},
setSubtract: function () {
this.value -= 1
}
}
})
var vm = new Vue({
el: '#app',
data: {
list: [
{A: 1},
{A: 2},
{A: 3},
{A: 4}
]
},
methods: {
childClick(key) {
败档 this.$children.forEach(child => {
if (child.$options._componentTag === 'child' && child.$vnode.key !== key) {
碧粗 child.setSubtract()
}
})
}
}
})
</script>
</body>
</html>
这是按你描述直接修改你的代码，可以达到你的需求，不过实际使用中有这种需求我更建议用下面这种方法，这样数据流更清晰
<!DOCTYPE html><html>
<head>
<meta charset="察慧乱UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<title>component-4</title>
</head>
<body>
<h1>component-4</h1>
<hr>
<div id="app">
<child v-for="(item,key) in list" :key="key" :value="item.A" @add="childChange(key)"></child>
</div>
<script type="text/javascript">
Vue.component('child', {
template: '<div style="color:red" @click="$emit(\'add\')">{{value}}</div>',
props: {
value: Number
}
})
var vm = new Vue({
el: '#app',
data: {
list: [
{A: 1},
{A: 2},
{A: 3},
{A: 4}
]
},
methods: {
childChange(key) {
this.list.forEach((item, index) => {
if (index === key) {
item.A += 1
} else {
item.A -= 1
}
})
}
}
})
</script>
</body>
</html>
使用组枣液御件里的bind这个神器
<template v-for="item in myway.list">
<compa v-if="$index % 2 == 0" :data="item"></compa>
<compb v-else :data="item"></compb>
</template>
整数（Integer）：任意自然数(如1,2,3,4,5)以及它们的负数或0。（整数是表示物体个数的数，0表示有0个物埋兆体）整数是人类能够掌握的最基本的数学工具。整数的全体构成整数集，整数集合是一个数环。在整数系中，自然数为0和正整数的统称，称0为零，称-1、-2、-3、?、-n、? (n为整数)为负整数。正整数、零与负整数构成整数系。 一个给定的整数n可以是负数，非负数，零凳岩（n=0）或正数。
<div id="subject-list-item"><ol>
<div v-for="subject in subjects">
<li>
{{subject.question}}
<input type="radio" v-model="subject.answer_e" v-bind:value="subject.answer_a" >
<span>{{subject.answer_a}}</span>
<input type="radio" v-model="subject.answer_e" v-bind:value="subject.answer_b" >
<span>{{subject.answer_b}}</span>
<input type="radio" v-model="subject.answer_e" v-bind:value="subject.answer_c" >
<span>{{subject.answer_c}}</span>
<input type="radio" v-model="subject.answer_e" v-bind:value="subject.answer_d" >
<span>{{subject.answer_d}}</span>
</li>
</div>
<老让/ol>
</div>
这里需要注意，v-model会变成value的值，所以不能单纯的从官启茄网的例子上照抄侍旁局。而是需要将v-model设置为一个动态的值。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）