想要的效果
點擊按鈕，使textarea,的resize屬性，在none和vertical之間動態(tài)切換
在已有的數(shù)組里追加數(shù)據(jù)，不行
<template>
<div>
<helloTest></helloTest>
<ul>
<li v-for="item in data" :key="item.id">
{{item.id}}--{{item.name}}--{{item.show}}
<button @click="aa(item)">aa</button>
<textarea :class="{actived:item.show}"></textarea>
</li>
</ul>
</div>
</template>
<script>
import helloTest from "@/components/helloTest";
export default {
components: {
helloTest
},
data() {
return {
data: [
// { id: 1, name: "jie1",show:false },
// { id: 2, name: "jie2" ,show:false },
// { id: 3, name: "jie3",show:false }
{ id: 1, name: "jie1" },
{ id: 2, name: "jie2"},
{ id: 3, name: "jie3"}
]
};
},
methods: {
aa(item) {
console.log(item);
item.show = !item.show;
console.log(item);
},
dataArrar(){
this.data.forEach(item => {
item.show = false;
});
}
},
created() {
// this.dataArrar()
},
mounted() {
this.dataArrar()
}
};
</script>
<style>
textarea.actived {
resize: none;
}
</style>
如果原來data里有show這個屬性，就可以，但是后臺傳過來的數(shù)據(jù)沒有show這個屬性
<template>
<div>
<ul>
<li v-for="item in data" :key="item.id">
{{item.id}}--{{item.name}}--{{item.show}}
<button @click="aa(item)">aa</button>
<textarea :class="{actived:item.show}"></textarea>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
data: [
{ id: 1, name: "jie1",show:false },
{ id: 2, name: "jie2" ,show:false },
{ id: 3, name: "jie3",show:false }
// { id: 1, name: "jie1" },
// { id: 2, name: "jie2" },
// { id: 3, name: "jie3" }
]
};
},
methods: {
aa(item) {
console.log(item);
item.show = !item.show;
console.log(item);
},
dataArrar() {
this.data.forEach(item => {
item.show = false;
});
}
},
created() {
// this.dataArrar()
},
mounted() {
this.dataArrar();
}
};
</script>
<style>
textarea.actived {
resize: none;
}
</style>
重新上傳
2 回答
- 2 回答
- 0 關(guān)注
- 4660 瀏覽
添加回答
舉報
0/150
提交
取消