在前面基础上增加vue与element资源。
在static文件夹下创建plugins文件夹将资源放入
在html头引入资源文件
<!-- 引入vue -->
<script src="../../plugins/vue.min.js"></script>
<!-- 引入jquery -->
<script src="../../plugins/jquery.min.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet"
href="../../plugins/element-ui/theme-default/index.css">
<!--引入组件库-->
<script src="../../plugins/element-ui/index.js"></script>
进行测试即可
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 引入vue -->
<script src="../../plugins/vue.min.js"></script>
<!-- 引入jquery -->
<script src="../../plugins/jquery.min.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet"
href="../../plugins/element-ui/theme-default/index.css">
<!--引入组件库-->
<script src="../../plugins/element-ui/index.js"></script>
<title>Insert title here</title>
</head>
<body>
<div id="rrapp">
<div v-show="showlist">aaaa<button @click="add">隐藏</button><el-row>
<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="info">信息按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
</el-row>
<el-row>
<el-button plain>朴素按钮</el-button>
<el-button type="primary" plain>主要按钮</el-button>
<el-button type="success" plain>成功按钮</el-button>
<el-button type="info" plain>信息按钮</el-button>
<el-button type="warning" plain>警告按钮</el-button>
<el-button type="danger" plain>危险按钮</el-button>
</el-row>
<el-row>
<el-button round>圆角按钮</el-button>
<el-button type="primary" round>主要按钮</el-button>
<el-button type="success" round>成功按钮</el-button>
<el-button type="info" round>信息按钮</el-button>
<el-button type="warning" round>警告按钮</el-button>
<el-button type="danger" round>危险按钮</el-button>
</el-row>
<el-row>
<el-button icon="el-icon-search" circle></el-button>
<el-button type="primary" icon="el-icon-edit" circle></el-button>
<el-button type="success" icon="el-icon-check" circle></el-button>
<el-button type="info" icon="el-icon-message" circle></el-button>
<el-button type="warning" icon="el-icon-star-off" circle></el-button>
<el-button type="danger" icon="el-icon-delete" circle></el-button>
</el-row></div>
</div>
<button type="button"onclick="text()">查询</button>
<button type="button"onclick="update()"class="admin">修改</button>
<button type="button"onclick="del()"class="admin">删除</button>
</body>
<style>
.admin{
display: none
}
</style>
<script type="text/javascript">
//测试vue
$(function(){
console.log("asd")
$.ajax({
type: "POST",
url: "/user/list",
contentType: "application/json",
success: function(r){
console.log(r)
for(var i=0;i<r.length;i++){
console.log(r[i])
if(r[i]=="admin"){
console.log("admin用户")
$(".admin").css("display","block");
}
}
}
});
})
var vm = new Vue({
el : '#rrapp',
data : {
showlist : true,
},
methods : {
add:function(){
alert("asd")
vm.showlist = false;
}
}
});
</script>
</html>
element 组件官方网址http://element.eleme.io/#/zh-CN
随便复制几个按钮测试样式即可。
资源文件包地址:vue+element资源文件