Thymeleaf页面使用vuejs渲染数据

Thymeleaf页面使用vuejs渲染数据

model已经有数据了

item.html

1）使用js模板获取数据，赋值给js变量

const user = /*[[${user}]]*/ {};

2）把第一步的js变量声明到vuejs中

在vue的data中声明即可

data:{
user
}

3）在vuejs中使用js变量

展示特有规格参数

取出当前商品的特殊规格参数 及 该分类下的所有特殊规格参数值，并放入Vue的data中

<script th:inline="javascript">
    //取出SpuDetail对象
    const detail = /*[[${detail}]]*/ {};

    //取出特有规格参数列表
    let specialSpec = JSON.parse(detail.specialSpec);

    //设计用于存储特有规格参数数据对象，格式：{4:"机身颜色",12:"内存"....}
    let params = {};
    //取出specs规格组和规格参数
    const specs = /*[[${specs}]]*/ [];
    specs.forEach(group=>{
        group.params.forEach(param=>{
             //只取出特有参数
            if(!param.generic){
                params[param.id] = param.name;
            }
        });
    });

</script>

<script>
    var itemVm = new Vue({
        el:"#itemApp",
        data:{
            specialSpec,
            params,
        },
        components:{
            lyTop: () => import('/js/pages/top.js')
    }
    });
</script>

调试查看结果如下：

然后，找到页面对应位置渲染数据（大约188行）

<div class="clearfix choose">
                        <div id="specification" class="summary-wrap clearfix">
                            <dl v-for="(value,key,index) in specialSpecJson" :key="index">
                                <dt>
                                    <div class="fl title">
                                        <i>{{paramsMap[key]}}</i>
                                    </div>
                                </dt>
                                <dd v-for="(v,i) in value" :key="i">
                                    <a href="javascript:;" class="selected">
                                        {{v}}<span title="点击取消选择">&nbsp;</span>
                                    </a>
                                </dd>
                            </dl>
                        </div>

结果如下：

Memorial Day is 530 days I miss you xiaokeai