Question

我具有以下设置以及类和名称的奇怪呈现。

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绑定为属性？ “名称”是有点保留的属性吗？

事先感谢：）

Answer 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。它既可以来自组件本身，也可以来自其模板内部，也可以从父模板进行设置。

选择哪个取决于类的工作以及对此负责的两个组件中的哪一个。不一定是对还是错。

通常，组件负责控制其自身的样式，但常见的例外是控制布局的类。

例如，如果您有一个按钮组件，则决定按钮应为红色，绿色还是蓝色的类通常将由该组件本身进行管理。但是，如果该按钮需要在其父容器内右对齐，则按钮组件可能不需要了解这一点。对齐决定由父容器控制，它可以在按钮上设置类，而无需涉及按钮。

Vue.js：奇怪的类渲染

1 个答案: