问几个问题
来源：2-9 使用组件改造TodoList
qq_慕丝1448851
2020-08-05 13:33:51
第一个：这里的v-bind使用的是官方的第一个使用情况对吧？如果是的话那就是：后面的content不是固定的名字可以随意起名
；
第二个：我看官方文档上写的绑定一个attribute,那是不是就是说在li上面绑定了一个content=“item”，是的话那应该html结构上有才对啊？难道我理解错了？
结构上并没有，
这个里面我也没找到。。。。是不是我把这里理解错了？
3回答
-
同学你好，如下所示content和index都是绑定在子组件todo-item上
在子组件内部使用props接收绑定的数据，在li标签中使用了content数据
并没有绑定在li标签上，所以检查元素时，li标签上不会有属性。
如果想要在li上绑定自定义属性，需要直接在li标签设置才可以，示例：
测试结果如下：
同学可以测试理解下，祝学习愉快~
0 -
qq_慕丝1448851
提问者
2020-08-05
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello</title>
<script src='./vue.js'></script>
</head>
<body>
<div id="app">
<input type="text" v-model="inputValue" placeholder="请输入你最喜欢吃的水果"/>
<button v-on:click="handleBtnClick">提交</button>
<button v-on:click="delBtnClick">删除</button>
<ul>
<!-- <li v-for="item in list">{{item}}</li> -->
<todo-item v-bind:content='item'
v-bind:index='index'
v-for='(item,index) in list'
@delete="handleItemDelete">
</todo-item>
</ul>
</div>
<script>
// 全局组件的使用
// 定义全局组件
// Vue.component('TodoItem',{
// props:['content'],
// template:"<li >{{content}}</li>"
// })
// 局部定义
// 定义
var TodoItem={
props:['content','index'],
template:"<li v-on:click='handleItemClick'>{{content}}</li>",
methods:{
handleItemClick:function () {
// console.log(this.index)
this.$emit('delete',this.index);
}
}
} ;
// 然后在app中添加组件components
var app=new Vue({
el:'#app',
components:{
TodoItem:TodoItem
},
data:{
list:[],
// 双向绑定
inputValue:''
},
methods:{
handleBtnClick:function(){
if(this.inputValue) {
this.list.push(this.inputValue);
}else{
return;
}
this.inputValue='';
},
delBtnClick:function(){
console.log(this.list);
if(this.list.length){
this.list.pop();
}else{
alert('已经没有可删除项啦!!!')
}
},
handleItemDelete:function(index){
// 点击哪项删除哪项
// this.list.splice(index,1)
// alert(index)
// 点击哪项哪项加1
this.list.splice(index,1,(parseInt(this.list[index])+1));
}
}
})
</script>
</body>
</html>
我一直在边听边修改代码，这节听完了，代码有点多了。
这就是我代码，不过打开看li标签上也什么都没有，没有绑定的content=“”，也没有后来课程绑定的index=“”；虽说效果是能够实现的
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello</title>
<script src='./vue.js'></script>
</head>
<body>
<div id="app">
<input type="text" v-model="inputValue" placeholder="请输入你最喜欢吃的水果"/>
<button v-on:click="handleBtnClick">提交</button>
<button v-on:click="delBtnClick">删除</button>
<ul>
<!-- <li v-for="item in list">{{item}}</li> -->
<todo-item v-bind:content='item'
v-bind:index='index'
v-for='(item,index) in list'
@delete="handleItemDelete">
</todo-item>
</ul>
</div>
<script>
// 全局组件的使用
// 定义全局组件
// Vue.component('TodoItem',{
// props:['content'],
// template:"<li >{{content}}</li>"
// })
// 局部定义
// 定义
var TodoItem={
props:['content','index'],
template:"<li v-on:click='handleItemClick'>{{content}}</li>",
methods:{
handleItemClick:function () {
// console.log(this.index)
this.$emit('delete',this.index);
}
}
} ;
// 然后在app中添加组件components
var app=new Vue({
el:'#app',
components:{
TodoItem:TodoItem
},
data:{
list:[],
// 双向绑定
inputValue:''
},
methods:{
handleBtnClick:function(){
if(this.inputValue) {
this.list.push(this.inputValue);
}else{
return;
}
this.inputValue='';
},
delBtnClick:function(){
console.log(this.list);
if(this.list.length){
this.list.pop();
}else{
alert('已经没有可删除项啦!!!')
}
},
handleItemDelete:function(index){
// 点击哪项删除哪项
// this.list.splice(index,1)
// alert(index)
// 点击哪项哪项加1
this.list.splice(index,1,(parseInt(this.list[index])+1));
}
}
})
</script>
</body>
</html>
我一直在边听边修改代码，这节听完了，代码有点多了。
这就是我代码，不过打开看li标签上也什么都没有，没有绑定的content=“”，也没有后来课程绑定的index=“”；虽说效果是能够实现的
0 -
好帮手慕慕子
2020-08-05
同学你好，对于你的问题解答如下：
是指如下所示的content的吗？如果是这里的话，那么content是定义的，可以随意起名字。
不清楚同学代码具体是怎么写的，所以无法准确的进行分析，老师举了一个简单的示例，帮助同学更好的理解，如下所示：
li上绑定了一个自定义属性，名为test
结果如下：li标签上确实添加了一个属性test值为a
同学可以结合示例测试理解下，如果还有问题，可以直接将你写的代码粘贴过来，帮助同学准确的定位与解决问题。祝学习愉快~
0h020-08-05
相似问题