我具有以下设置以及类和名称的奇怪呈现。
public class countryAdapter extends RecyclerView.Adapter<countryAdapter.countryViewHolder> {
private ArrayList<countryItem> mCountryList;
public static class countryViewHolder extends RecyclerView.ViewHolder{
public TextView mCountryName;
public TextView mActivePatients;
public TextView mRecovered;
public TextView mDeath;
public countryViewHolder(@NonNull View itemView) {
super(itemView);
mCountryName=itemView.findViewById(R.id.CountyNameTv);
mActivePatients=itemView.findViewById(R.id.activePatientsTv);
mRecovered=itemView.findViewById(R.id.recoveredTv);
mDeath=itemView.findViewById(R.id.deathTv);
}
}
public countryAdapter(ArrayList<countryItem> countryList){
mCountryList = countryList;
}
@NonNull
@Override
public countryViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
View v= LayoutInflater.from(parent.getContext()).inflate(R.layout.itemview,parent,false);
countryViewHolder cvh =new countryViewHolder(v);
return cvh;
}
@Override
public void onBindViewHolder(@NonNull countryViewHolder holder, int position) {
countryItem currentItem=mCountryList.get(position);
holder.mCountryName.setText(currentItem.getCountryname());
holder.mActivePatients.setText(currentItem.getActivePatients());
holder.mRecovered.setText(currentItem.getRecovered());
holder.mDeath.setText(currentItem.getDeath());
}
@Override
public int getItemCount() {
return mCountryList.size();
}
public void swapData(ArrayList<countryItem> list) {
if (list != null) {
this.mCountryList.clear();
this.mCountryList.addAll(list);
notifyDataSetChanged();
}
}
}
渲染:
<component v-for="item in List"
:item="item"
:class="item.class"
:name="item.name"
</component>
let component = Vue.component('component', {
props: ['item'],
template: `<li :class="item.class">
{{ item.name }}
</li>`
}),
data: function (){
return {
List: [
{key:0, class:'someClass', name:'someName'},
]
}
},
})
地球上哪里有双重“ someClass”?为什么“列表”中的“名称”项在这里是一个属性,因为它甚至没有被使用,并且被v绑定为属性? “名称”是有点保留的属性吗?
事先感谢:)
答案 0 :(得分:1)
问题在这里:
<component v-for="item in List"
:item="item"
:class="item.class"
:name="item.name">
</component>
在本节中,您将class
绑定到item.class
,并将属性name
绑定到item.name
。 Vue会将这两者都应用于相应组件的外部元素。
然后在该组件中添加:class="item.class"
,这将再次添加该类。
要解决此问题,只需从第一个模板中删除:class="item.class"
和:name="item.name"
。
<component v-for="item in List"
:item="item">
</component>
在List
的{{1}}中定义了data
,但似乎在父组件模板的范围内使用它,这也有点神秘。
根据评论进行更新:
可以通过两种方式在外部元素上设置component
。它既可以来自组件本身,也可以来自其模板内部,也可以从父模板进行设置。
选择哪个取决于类的工作以及对此负责的两个组件中的哪一个。不一定是对还是错。
通常,组件负责控制其自身的样式,但常见的例外是控制布局的类。
例如,如果您有一个按钮组件,则决定按钮应为红色,绿色还是蓝色的类通常将由该组件本身进行管理。但是,如果该按钮需要在其父容器内右对齐,则按钮组件可能不需要了解这一点。对齐决定由父容器控制,它可以在按钮上设置类,而无需涉及按钮。