有这样一个例子。当您点击“添加注释”按钮时,它会检查输入是否为空,并添加一个包含输入文本的 block 进入输入。
如何在不使用 v-bind 的情况下制作相同的示例,因为它在 Framework7 中不起作用?
尝试做类似的事情,但没有成功。
et getCat = document.getElementByClassName('inputCat').value;
let newCat = this.getCat;
this.cats.push(this.newCat);
this.newCat = '';
this.saveCats();
v-model 的工作示例
<f7-block v-for="(cat, n) in cats">
<span class="cat">{{ cat }}</span>
<f7-button fill color="red" @click="removeCat(n)">Удалить</f7-button>
</f7-block>
<f7-list form>
<f7-list-input
class="inputCat"
v-model="newCat"
type="text"
placeholder="Заметка"
></f7-list-input>
<f7-button fill color="blue" @click="addCat">Добавить заметку</f7-button>
</f7-list>
export default {
data() {
return{
cats:[],
newCat: null
}
},
mounted() {
if (localStorage.getItem('cats')) {
try {
this.cats = JSON.parse(localStorage.getItem('cats'));
} catch(e) {
localStorage.removeItem('cats');
}
}
},
methods: {
addCat() {
// убедиться, что было что-либо введено
if (!this.newCat) {
return;
}
this.cats.push(this.newCat);
this.newCat = '';
this.saveCats();
},
removeCat(x) {
this.cats.splice(x, 1);
this.saveCats();
},
saveCats() {
const parsed = JSON.stringify(this.cats);
localStorage.setItem('cats', parsed);
}
}
}
最佳答案
根据Framework7 documentation使用@input事件。
export default {
data() {
newCat: null;
}
}
<template>
<f7-list form>
<f7-list-input
class="inputCat"
:value="newCat"
@input="newCat = $event.target.value"
type="text"
placeholder="Заметка"
></f7-list-input>
<f7-button fill color="blue" @click="addCat">Добавить заметку</f7-button>
</f7-list>
</template>
关于javascript - 如何在 Vue.js 中不使用 v-model 的情况下从输入中获取值?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55695833/