<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>列表输出</title>
<link href="css/special.css" rel="stylesheet" />
<script src="js/vue.min.js"></script>
<style>
#app ul li{float:left;width:100%;height:33px;}
</style>
</head>
<body>
<div class="pc-content span6">
<h3>列表输出</h3>
<div id="app">
<ul>
<li v-for="value in todos">
{{ value.text }}
</li>
</ul>
</div>
<p>列表输出使用 v-for(v-for取代了1.0以前版本中的v-repeat) 这个指令就能完成</p>
</div>
<script>
new Vue({
el: '#app',
data: {
todos: [
{ 'text': '1. Learn JavaScript' },
{ 'text': '2. Learn Vue.js' },
{ 'text': '3. Build Something Awesome' }
]
}
})
</script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>列表输出</title>
<link href="css/special.css" rel="stylesheet" />
<script src="js/vue.min.js"></script>
<style>
#app ul li{float:left;width:100%;height:33px;}
</style>
</head>
<body>
<div class="pc-content span6">
<h3>列表输出</h3>
<div id="app">
<ul>
<li v-for="value in todos">
{{ value.text }}
</li>
</ul>
</div>
<p>列表输出使用 v-for(v-for取代了1.0以前版本中的v-repeat) 这个指令就能完成</p>
</div>
<script>
new Vue({
el: '#app',
data: {
todos: [
{ 'text': '1. Learn JavaScript' },
{ 'text': '2. Learn Vue.js' },
{ 'text': '3. Build Something Awesome' }
]
}
})
</script>
</body>
</html>
932
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
