vue遍历$store.state中数组展示图标

505 阅读1分钟

将iconfont数组保存形式为:

原来形式:&#**xe666**;

保存形式:\ue666    即将&#x替换为\u

store/index.js

// 引入vue
import Vue from "vue";
// 引入vuex
import Vuex from "vuex"
Vue.use(Vuex);
const state = {
    outtitle: [
        {
            id: "001",
            name: "通讯",
            unicode: "\ue671"
        }, {

            id: "002",
            name: "日用品",
            unicode: "\ue63f"
        }, {

            id: "003",
            name: "娱乐",
            unicode: "\ue620"
        },
   ];
   export default new Vuex.Store({
    state
})

index.vue

<ul class="addout-body-ul">
        <li class="addout-body-li" v-for="k in $store.state.outtitle"
            :key="k.id">
            //展示图标
            <span class="iconfont addout-body-icon">{{ k.unicode }}</span>
            //展示图标名称
            <p class="addout-p">{{ k.name }}</p>
          </div>
        </li>
 </ul>