在SSM架构中融入Vue：实现声明式渲染并处理元素href的字符串连接

最编程 2024-07-22 07:40:23

...

一、引入Vue

在官网上下载vue.js。并用<script>标签引入

1.下载Vue.js，地址：Vue.js下载地址

<script type="text/javascript " src="js/vue.js "></script>

二、通过ajax获取后台参数，使用Vue渲染

调用后台control，获取到数据，传到前端，使用Vue进行渲染。

        //详细分类,使用Vue渲染
		function findSortDetail(){
			$.post("sortdetail/findAllSrotdetail.action",function(data){
				var json = JSON.parse(data);
				console.log(json.sortDetails);
				new Vue({
					  el: '#sortDetails',
					  data: {
						  sortDetails: json.sortDetails
					  }
				})
			});
		}

渲染结果显示部分：

<div id="sortDetails">
    <dd v-for = "sortDetail in sortDetails" v-if = "sortDetail.sortId == 1">
 	    <a :title="sortDetail.sortDetailName" 
 			:href="'a.action?sortDetailId='+sortDetail.sortDetailId">
 		    {{ sortDetail.sortDetailName }}
 		</a>
 	</dd>
</div>

注意：<a>标签中的href中，采用字符串拼接的形式，href前面需要加 : ，同理title前面也要加 : 才能使用Vue渲染后的数据。

上一篇：整合SSM三剑客的实战教程指南

下一篇：快速上手Spring Security（在SSM架构下进行配置指南）