正在回答 回答被采纳积分+1
同学你好，首先这两个是有区别的，v-model是实现双向数据绑定的，v-bind实现的是单项数据绑定，按照同学提供的代码，这个练习是需要使用双向数据绑定的方法来实现的，也就是说要使用v-model来实现效果最佳。
祝学习愉快！
-
同学你好，是可以实现的，但比较繁琐。以下例子同学可以做参考，使用bind + 事件的形式，仿v-model效果。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="root">
<!-- <input type="text" v-model="inputValue"> -->
<input type="text" @input="changeInput" v-bind:value="inputValue">
<ul>
<li v-for="i in list">{{i.name}}</li>
</ul>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#root',
data: {
inputValue: "",
list: [{
name: '牛仔裤1'
}, {
name: '牛仔裤2'
}, {
name: '牛仔裤3'
}, ],
},
created: function() {
this.list2 = this.list
},
methods: {
changeInput(e) {
var that = this;
var val = e.target.value;
for (let i = 0; i < that.list.length; i++) {
if (that.list[i].name == val) {
that.list = [{}]
that.inputValue = val;
that.list[0].name = val;
}
}
if (!val) {
that.inputValue = '';
that.list = that.list2;
}
},
}
});
</script>
</html>
同学可以自己试试，祝学习愉快！
2022-03-08 14:15:39
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星