close
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- <script src="http://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script> -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="meal in meals | limitBy 2">{{meal.name}}</li>
</ul>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
meals:[{
id:1,
name:'麥克炸機',
baverage:'可口可樂'
},{
id:2,
name:'勁辣雞腿堡',
baverage:'爽健美茶'
},{
id:3,
name:'雞翅',
baverage:'牛奶'
}]
}
});
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- <script src="http://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script> -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="meal in meals | filterBy selector">{{meal.name}}</li>
</ul>
只有價錢是500的會出來
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
selector:'500',
meals:[{
id:1,
name:'麥克炸機',
baverage:'可口可樂',
price:'500'
},{
id:2,
name:'勁辣雞腿堡',
baverage:'爽健美茶',
price:'400'
},{
id:3,
name:'雞翅',
baverage:'牛奶',
price:'500'
}]
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- <script src="http://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script> -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="meal in meals | orderBy 'id' -1">{{meal.name}}</li>
</ul>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
selector:'500',
meals:[{
id:1,
name:'麥克炸機',
baverage:'可口可樂',
price:'500'
},{
id:2,
name:'勁辣雞腿堡',
baverage:'爽健美茶',
price:'400'
},{
id:3,
name:'雞翅',
baverage:'牛奶',
price:'500'
}]
}
});
</script>
</body>
</html>
全站熱搜
留言列表
伺服器架設 (1)
