<template >
<div >
<div v-for="(el,index) in arr" :key="index">
<button @click='fn(index)'>{{el}}</button>
</div>
<input type="text" v-model="msg" @change="bn" />
<p>{{msg}}</p>
</div>
</template>
<script>
import Vue from 'vue'
export default {
name: '',
data() {
return {
arr: ['第一个', '第二个', '第三个'],
// index:0
flag:true,
msg:'测试'
}
},
components: {
},
methods: {
fn(index) {
this.arr[index]=index //不能渲染到页面上,但是可以改变值
console.log( this.arr[index]);
// this.arr.push(123)//能刷新页面 可以改变值
// this.arr.splice(0,1,"666")//能刷新页面 可以改变值
// Vue.set(this.arr,index, index) //可以取值且可以渲染到界面上
// this.index=index
},
bn(e){
console.log(e);
this.msg=e.target.value
}
}
}
</script>
<style scpoed='scoped'>
</style>