版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_33621967/article/details/91412995
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="layui/css/layui.css">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue.js例子</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<style>
.body {
width: 95%;
height: auto;
position: absolute;
left: 50%;
transform: translateX(-50%);
background: antiquewhite;
padding: 30px 10px 50px 30px;
}
.content {
background: white;
padding: 20px;
}
.part {
padding-bottom: 20px;
border-bottom: 1px solid gray;
}
.title {
padding: 20px 0 20px 0;
font-weight: bold;
}
.layout {
color: gray;
display: flex;
flex-direction: row;
}
.more {
text-decoration: none;
}
.information {
padding-top: 20px;
display: flex;
flex-direction: row;
align-items: center;
}
.information>div {
padding-right: 10%;
}
.grade {
display: flex;
align-items: center;
}
.grade>ul {
/*margin-left: -40px;*/
list-style: none;
display: flex;
flex-direction: row;
}
.grade ul li {
width: 32px;
height: 34px;
}
ul .noclick {
background: url(images/xing.png);
}
ul .click {
background: url(images/xing2.png);
}
</style>
</head>
<body style="margin: 0px;">
<div class="body">
<div class="content" id="content">
<div class="part" v-for="site in sites">
<div class="title">主题：1000001—零售客户{{site.name}}</div>
<div class="layout">
<div class="span_left" style="display: flex;flex-direction: row;">
<div>内</div>
<div>容：</div>
</div>
<div class="span_right">
<span v-bind:id="'change'+site.age">
家里的冠军阿隆索的风景数量大幅紧缩力度减肥手机里的风景阿萨德雷锋精神了的风景塑料袋快捷方式来得及发牢骚的
方式来得及发牢骚的风景塑料袋咖啡就是离开对方家里的冠军阿隆索的风景数量大幅紧缩力度减肥手机里的风景阿萨德
雷锋精神了的风景塑料袋快捷方式来得及发牢骚的风景塑料袋咖啡就是离开对方家里的冠军阿隆索的风景数量大幅紧缩
力度减肥手机里的风景阿萨德雷锋精神了的风景塑料袋快捷方式来得及发牢骚的风景塑料袋咖啡就是离开对方家里的冠
军阿隆索的风景数量大幅紧缩力度减肥手机里的风景阿萨德雷锋精神了的风景塑料袋快捷方式来得及发牢骚的风景塑料
袋咖啡就是离开对方家里的冠军阿隆索的风景数量大幅紧缩力度减肥手机里的风景阿萨德雷锋精神了的风景塑料袋快捷
方式来得及发牢骚的风景塑料袋咖啡就是离开对方家里的冠军阿隆索的风景数量大幅紧缩力度减肥手机里的风景阿萨德
雷锋精神了的风景塑料袋快捷方式来得及发牢骚的风景塑料袋咖啡就是离开对方家里的冠军阿隆索的风景数量大幅紧缩
力度减肥手机里的风景阿萨德雷锋精神了的风景塑料袋快捷方式来得及发牢骚的风景塑料袋咖啡就是离开对方家里的冠
军阿隆索的风景数量大幅紧缩力度减肥手机里的风景阿萨德雷锋精神了的风景塑料袋快捷方式来得及发牢骚的风景塑料
袋咖啡就是离开对方家里的冠军阿隆索的风景数量大幅紧缩力度减肥手机里的风景阿萨德雷锋精神了的风景塑料袋快捷
</span>
<a v-bind:id="'btn'+site.age" class="more" style="color: blue">展开</a> <!--onclick="big(this)"-->
</div>
</div>
<div class="information">
<div>业务owner：100000000</div>
<div>发布时间：2019-06-03</div>
<div class="grade" id="grade">
评分：
<ul >
<template v-for="n in site.star">
<li class="click"> </li>
</template>
<template v-for="n in 5-site.star">
<li class="noclick"> </li>
</template>
<!--
<li class="noclick"></li>
<li class="noclick"></li>
<li class="noclick"></li>
<li class="noclick"></li>
<li class="noclick"></li>
<li class="noclick"></li>
-->
</ul>
</div>
</div>
</div>
<div id="demo20"></div>
</div>
</div>
<script src="layui/layui.js"></script>
<script>
//测试数据
var datall = [
{ name: '北京', age: 1 ,star:3},
{ name: 'adad', age: 2 ,star:2},
{ name: 'asdf', age: 3 ,star:5},
{ name: 'dasf', age: 4 ,star:3 },
{ name: 'dsaf', age: 5 ,star:4},
{ name: 'sdaf', age: 6 ,star:5},
{ name: 'sdaf', age: 7 ,star:3},
{ name: 'dsaf', age: 8 ,star:2},
{ name: '北京', age: 9 ,star:3},
{ name: '北京', age: 10 ,star:3},
{ name: '北京', age: 11 ,star:1},
{ name: '北京', age: 12 ,star:3},
{ name: '北京', age: 13 ,star:3},
{ name: '北京', age: 14 ,star:3},
{ name: '北京', age: 15 ,star:4},
{ name: '北京', age: 16 ,star:3},
{ name: '北京', age: 17 ,star:3},
{ name: '北京', age: 18 ,star:4},
{ name: '北京', age: 19 ,star:3},
{ name: '北京', age: 20 ,star:2},
{ name: '北京', age: 21 ,star:3},
{ name: '北京', age: 22 ,star:3},
{ name: '北京', age: 23 ,star:2},
{ name: '北京', age: 24 ,star:3},
];
layui.use(['laypage', 'layer'], function () {
var laypage = layui.laypage
, layer = layui.layer;
//将一段数组分页展示
var data = datall;
//调用分页
laypage.render({
elem: 'demo20'
, limit: 3
, count: data.length
, jump: function (obj,first) {
//console.log("重新渲染了一次！！");
var arr = [];
var thisData = data.concat().splice(obj.curr * obj.limit - obj.limit, obj.limit); //当页的数据
layui.each(thisData, function (index, item) {
//console.log("name:" + item.name);
//console.log("age:" + item.age);
});
vvue(thisData);
}
});
});
var v = new Vue({
el: '#content',
data: {
sites: [
]
}
})
function vvue(totalArray) {
//console.log("我到了这一步");
for (var i = 0; i < totalArray.length; i++) {
// console.log("name:" + totalArray[i].name + "age:" + totalArray[i].age);
}
v.sites = totalArray; //改变vue里面data的值
}
</script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
//var dataTest=datall;
//span文本中的数据应该是从数据库中得到，是灵活的数据
//伸缩展开的点击事件
var spanContent="家里的冠军阿隆索的风景数量大幅紧缩力度减肥手机里的风景阿萨德雷锋精神了的风景塑料袋快捷方式来得及发牢骚的"+
"家里的冠军阿隆索的风景数量大幅紧缩力度减肥手机里的风景阿萨德雷锋精神了的风景塑料袋快捷方式来得及发牢骚的"+
"家里的冠军阿隆索的风景数量大幅紧缩力度减肥手机里的风景阿萨德雷锋精神了的风景塑料袋快捷方式来得及发牢骚的"+
"家里的冠军阿隆索的风景数量大幅紧缩力度减肥手机里的风景阿萨德雷锋精神了的风景塑料袋快捷方式来得及发牢骚的"+
"家里的冠军阿隆索的风景数量大幅紧缩力度减肥手机里的风景阿萨德雷锋精神了的风景塑料袋快捷方式来得及发牢骚的"+
"家里的冠军阿隆索的风景数量大幅紧缩力度减肥手机里的风景阿萨德雷锋精神了的风景塑料袋快捷方式来得及发牢骚的"+
"家里的冠军阿隆索的风景数量大幅紧缩力度减肥手机里的风景阿萨德雷锋精神了的风景塑料袋快捷方式来得及发牢骚的"+
"家里的冠军阿隆索的风景数量大幅紧缩力度减肥手机里的风景阿萨德雷锋精神了的风景塑料袋快捷方式来得及发牢骚的";
var spanContentSub=spanContent.substr(0, 150) + "......";
/* function big(id){
var str=$(id).attr("id"); //返回规定属性值
var number=str.substring(3); //提取字符串，判断点击的是哪一个
var spanId="change"+number;
var btn=document.getElementById(str);
var content=document.getElementById(spanId);
console.log(content.innerHTML);
if(btn.innerHTML=="展开"){
content.innerHTML=spanContentSub;
content.style.color="blue";
btn.innerHTML="收缩";
}else{
content.innerHTML=spanContent;
content.style.color="red";
btn.innerHTML="展开";
}
}*/
window.onload=function(){
var btn=document.getElementById("btn1");
var content=document.getElementById("change1");
var onOff = false;// true表示展开
btn.onclick = function () {
console.log("这是btn1的点击事件！！！");
if (onOff) {
content.innerHTML=spanContentSub;
content.style.color="blue";
btn.innerHTML = '展开'
} else {
content.innerHTML=spanContent;
content.style.color="red";
btn.innerHTML = '收起';
}
onOff = !onOff; //每点击一次，改变一次展开、收缩状态
return false; //阻止a标签的默认事件
};
}
</script>
</body>
</html>