vue尝鲜
演示效果1
将 data 中的数据渲染到页面上。
示例代码1
<div id="app">
{{message}}
<hr />
{{msg2}}
<hr />
{{msg}}
<hr />
{{arr}}
<hr />
{{json}}
</div>
<script src="vue.js"></script>
<script type="text/javascript">
new Vue({
el:'#app',//
data:{
message:'Hello Vue!',
msg2:10,
msg:true,
arr:['apple','banana','orange','pear'],
json:{a:'张三',b:'李四',c:'王五'}
}
});
</script>演示效果2
实现数据双向绑定。
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#demo{
width: 800px;
margin: 200px auto;
}
input{
width: 600px;
height: 50px;
border:10px solid green;
padding-left: 10px;
font:30px/50px "微软雅黑";
}
.msg{
width: 600px;
font:30px/50px "微软雅黑";
color:red;
}
</style>
<script src="vue.js"></script>
<script type="text/javascript">
window.onload=function(){
new Vue({
el: '#demo',
data: {
msg:'welcome vue.js',
}
})
}
</script>
</head>
<body>
<div id="demo">
<input v-model='msg'/>
<div class="msg">
{{msg}}
</div>
</div>
</body>
</html>演示效果3
渲染json数据。
代码示例3
<div id="app">
<ol>
<li v-for="list in msg">
{{list.name}}
{{list.age}}
{{list.addr}}
</li>
</ol>
</div>
<script src="vue.js"></script>
<script type="text/javascript">
new Vue({
el:'#app',//
data:{
msg:[
{name:'张三1',age:'18',addr:'vue1'},
{name:'张三2',age:'18',addr:'vue2'},
{name:'张三3',age:'18',addr:'vue3'},
{name:'张三4',age:'18',addr:'vue4'},
{name:'张三5',age:'18',addr:'vue5'},
{name:'张三6',age:'18',addr:'vue6'}
]
}
});
</script>演示效果4
渲染图书电商数据，数据存储在libary.json中，https://91jack.github.io/Vue-...
代码示例4
<div id="app">
<h1>图书电商数据</h1>
<table>
<thead>
<tr>
<th>ID</th>
<th>分类</th>
</tr>
</thead>
<tbody>
<tr v-for="list in result">
<td>{{list.id}}</td>
<td>{{list.catalog}}</td>
</tr>
</tbody>
</table>
</div>
<script src="vue.js"></script>
<script type="text/javascript">
new Vue({
el:'#app',//
data:{
"resultcode":"200",
"reason":"success",
"result":[
{
"id":"242",
"catalog":"中国文学"
},
{
"id":"252",
"catalog":"人物传记"
},
{
"id":"244",
"catalog":"儿童文学"
},
{
"id":"248",
"catalog":"历史"
},
{
"id":"257",
"catalog":"哲学"
},
{
"id":"243",
"catalog":"外国文学"
},
{
"id":"247",
"catalog":"小说"
},
{
"id":"251",
"catalog":"心灵鸡汤"
},
{
"id":"253",
"catalog":"心理学"
},
{
"id":"250",
"catalog":"成功励志"
},
{
"id":"249",
"catalog":"教育"
},
{
"id":"245",
"catalog":"散文"
},
{
"id":"256",
"catalog":"理财"
},
{
"id":"254",
"catalog":"管理"
},
{
"id":"246",
"catalog":"经典名著"
},
{
"id":"255",
"catalog":"经济"
},
{
"id":"258",
"catalog":"计算机"
}
],
"error_code":0
}
});
</script>演示效果5
渲染微信精选数据，数据存储在wechat.json中，https://91jack.github.io/Vue-...
代码示例5
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
h1{
text-align: center;
}
table,
td,
th {
border-collapse: collapse;
border-spacing: 0
}
table {
/*width: 400px;*/
margin: 0 auto;
text-align: center;
}
td,
th {
border: 1px solid #bcbcbc;
padding: 5px 10px;
}
th {
background: #42b983;
font-size: 1.2rem;
font-weight: 400;
color: #fff;
cursor: pointer;
}
tr:nth-of-type(odd) {
background: #fff;
}
tr:nth-of-type(even) {
background: #eee;
}
a{
text-decoration: none;
display: block;
padding: 5px 10px;
background: #269ABC;
color:#fff;
}
</style>
</head>
<body>
<div id="app">
<h1>微信精选文章</h1>
<table>
<thead>
<tr>
<th>ID</th>
<th>标题</th>
<th>来源</th>
<th>图片</th>
<th>查看</th>
</tr>
</thead>
<tbody>
<tr v-for="list in result['list']">
<td>{{list.id}}</td>
<td>{{list.title}}</td>
<td>{{list.source}}</td>
<td><img :src="list.firstImg" alt="" width="300"/></td>
<td><a :href="list.url" target="_blank">阅读原文</a></td>
</tr>
</tbody>
</table>
</div>
<script src="vue.js"></script>
<script type="text/javascript">
new Vue({
el:'#app',//
data:{
"reason":"请求成功",
"result":{
"list":[
{
"id":"wechat_20170524020647",
"title":"这才是中国说话礼仪，太全了！",
"source":"腾讯网",
"firstImg":"http:\/\/zxpic.gtimg.com\/infonew\/0\/wechat_pics_-25166268.jpg\/640",
"mark":"",
"url":"http:\/\/v.juhe.cn\/weixin\/redirect?wid=wechat_20170524020647"
},
{
"id":"wechat_20170524021107",
"title":"十八层地狱都是什么样子？劝世人多行善",
"source":"刀墓手札",
"firstImg":"http:\/\/zxpic.gtimg.com\/infonew\/0\/wechat_pics_-25166891.jpg\/640",
"mark":"",
"url":"http:\/\/v.juhe.cn\/weixin\/redirect?wid=wechat_20170524021107"
},
{
"id":"wechat_20170524022075",
"title":"编辑部杀人事件",
"source":"故事会",
"firstImg":"http:\/\/zxpic.gtimg.com\/infonew\/0\/wechat_pics_-25167481.jpg\/640",
"mark":"",
"url":"http:\/\/v.juhe.cn\/weixin\/redirect?wid=wechat_20170524022075"
},
{
"id":"wechat_20170524020087",
"title":"生活的美好，缘于一颗平常心",
"source":"情绪管理",
"firstImg":"http:\/\/zxpic.gtimg.com\/infonew\/0\/wechat_pics_-24770365.jpg\/640",
"mark":"",
"url":"http:\/\/v.juhe.cn\/weixin\/redirect?wid=wechat_20170524020087"
},
{
"id":"wechat_20170524020085",
"title":"做一个纯粹的女人",
"source":"情绪管理",
"firstImg":"http:\/\/zxpic.gtimg.com\/infonew\/0\/wechat_pics_-15035340.jpg\/640",
"mark":"",
"url":"http:\/\/v.juhe.cn\/weixin\/redirect?wid=wechat_20170524020085"
},
{
"id":"wechat_20170524020223",
"title":"看懂的请给下一个人",
"source":"环球好听英文歌",
"firstImg":"http:\/\/zxpic.gtimg.com\/infonew\/0\/wechat_pics_-15866850.static\/640",
"mark":"",
"url":"http:\/\/v.juhe.cn\/weixin\/redirect?wid=wechat_20170524020223"
},
{
"id":"wechat_20170524020612",
"title":"你知道吗？好茶是泡出来的，好人是做出来的！",
"source":"普洱茶界",
"firstImg":"http:\/\/zxpic.gtimg.com\/infonew\/0\/wechat_pics_-25166255.jpg\/640",
"mark":"",
"url":"http:\/\/v.juhe.cn\/weixin\/redirect?wid=wechat_20170524020612"
},
{
"id":"wechat_20170524020995",
"title":"子若强于我，要钱做什么？子若不如我，留钱做什么（说得太好了！）",
"source":"洲际电池圈",
"firstImg":"http:\/\/zxpic.gtimg.com\/infonew\/0\/wechat_pics_-21531071.static\/640",
"mark":"",
"url":"http:\/\/v.juhe.cn\/weixin\/redirect?wid=wechat_20170524020995"
},
{
"id":"wechat_20170524022415",
"title":"电缆人必看！借钱见人心，还钱见人品！",
"source":"买卖宝",
"firstImg":"http:\/\/zxpic.gtimg.com\/infonew\/0\/wechat_pics_-25167687.jpg\/640",
"mark":"",
"url":"http:\/\/v.juhe.cn\/weixin\/redirect?wid=wechat_20170524022415"
},
{
"id":"wechat_20170523061558",
"title":"孩子出不出色，取决于妈妈的性格（深度好文）",
"source":"妈妈手册",
"firstImg":"http:\/\/zxpic.gtimg.com\/infonew\/0\/wechat_pics_-24679658.static\/640",
"mark":"",
"url":"http:\/\/v.juhe.cn\/weixin\/redirect?wid=wechat_20170523061558"
},
{
"id":"wechat_20170524017876",
"title":"每日诗词(359-109)",
"source":"诗词月刊",
"firstImg":"http:\/\/zxpic.gtimg.com\/infonew\/0\/wechat_pics_-25164852.jpg\/640",
"mark":"",
"url":"http:\/\/v.juhe.cn\/weixin\/redirect?wid=wechat_20170524017876"
},
{
"id":"wechat_20170524002636",
"title":"新婚不久丈夫去世，漂亮的妻子第二天就...太现实了！",
"source":"每日幽默小视频",
"firstImg":"",
"mark":"",
"url":"http:\/\/v.juhe.cn\/weixin\/redirect?wid=wechat_20170524002636"
},
{
"id":"wechat_20170524014500",
"title":"【我与浓情黑土地文学平台之缘】韩治林：我与浓情黑土地平台",
"source":"浓情黑土地",
"firstImg":"http:\/\/zxpic.gtimg.com\/infonew\/0\/wechat_pics_-18100317.static\/640",
"mark":"",
"url":"http:\/\/v.juhe.cn\/weixin\/redirect?wid=wechat_20170524014500"
},
{
"id":"wechat_20170524014630",
"title":"书画|精美五百罗汉图 五百罗汉的由来 附500罗汉全名单",
"source":"上上阁艺术沙龙",
"firstImg":"http:\/\/zxpic.gtimg.com\/infonew\/0\/wechat_pics_-25163758.jpg\/640",
"mark":"",
"url":"http:\/\/v.juhe.cn\/weixin\/redirect?wid=wechat_20170524014630"
},
{
"id":"wechat_20170524014621",
"title":"【涨知识】特稿写作秘诀在这里，拿走不谢！",
"source":"中国报业",
"firstImg":"http:\/\/zxpic.gtimg.com\/infonew\/0\/wechat_pics_-25163761.jpg\/640",
"mark":"",
"url":"http:\/\/v.juhe.cn\/weixin\/redirect?wid=wechat_20170524014621"
},
{
"id":"wechat_20170524014617",
"title":"书画|美国 Ricky.Mujica 瑞奇.穆希卡超现实浪漫主义绘画欣赏",
"source":"上上阁艺术沙龙",
"firstImg":"http:\/\/zxpic.gtimg.com\/infonew\/0\/wechat_pics_-25163726.jpg\/640",
"mark":"",
"url":"http:\/\/v.juhe.cn\/weixin\/redirect?wid=wechat_20170524014617"
},
{
"id":"wechat_20170524014603",
"title":"视听|心经的境界 佛音《般若波罗密多心经》-演唱:王蓉",
"source":"上上阁艺术沙龙",
"firstImg":"http:\/\/zxpic.gtimg.com\/infonew\/0\/wechat_pics_-25163713.jpg\/640",
"mark":"",
"url":"http:\/\/v.juhe.cn\/weixin\/redirect?wid=wechat_20170524014603"
},
{
"id":"wechat_20170524014607",
"title":"文化|中国古代四大美女之二《落雁•回望昭君》朗诵：高昂",
"source":"上上阁艺术沙龙",
"firstImg":"http:\/\/zxpic.gtimg.com\/infonew\/0\/wechat_pics_-25163715.jpg\/640",
"mark":"",
"url":"http:\/\/v.juhe.cn\/weixin\/redirect?wid=wechat_20170524014607"
},
{
"id":"wechat_20170524015424",
"title":"宗谱在我心中－记骆相生宗叔（修正版）",
"source":"骆姓论坛",
"firstImg":"http:\/\/zxpic.gtimg.com\/infonew\/0\/wechat_pics_-25164030.jpg\/640",
"mark":"",
"url":"http:\/\/v.juhe.cn\/weixin\/redirect?wid=wechat_20170524015424"
},
{
"id":"wechat_20170524015418",
"title":"安徽芜湖繁阳骆氏《忠懇堂》建祠修谱公告",
"source":"骆姓论坛",
"firstImg":"http:\/\/zxpic.gtimg.com\/infonew\/0\/wechat_pics_-25164010.jpg\/640",
"mark":"",
"url":"http:\/\/v.juhe.cn\/weixin\/redirect?wid=wechat_20170524015418"
}
],
"totalPage":3739,
"ps":20,
"pno":1
},
"error_code":0
}
});
</script>
</body>
</html>
371
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
