Skip to content

fn101-learning-point #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
RadianSmile wants to merge 1 commit into
base: master
Choose a base branch
from
Open

fn101-learning-point #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 20 additions & 0 deletions .codesandbox/workspace.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
{
"responsive-preview": {
"Mobile": [
320,
675
],
"Tablet": [
1024,
765
],
"Desktop": [
1400,
800
],
"Desktop HD": [
1920,
1080
]
}
}
294 changes: 154 additions & 140 deletions answer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,155 +1,169 @@
<!DOCTYPE html>
<html lang="en">

<head>

<link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.5/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/font-awesome@4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="./style.css">
<meta charset="utf-8">
<link
rel="stylesheet"
href="https://unpkg.com/bootstrap@3.3.5/dist/css/bootstrap.min.css"
/>
<link
rel="stylesheet"
href="https://unpkg.com/font-awesome@4.4.0/css/font-awesome.min.css"
/>
<link rel="stylesheet" href="./style.css" />
<meta charset="utf-8" />
</head>

<body >
<body>
<div id="app">
<nav class="container">
<h1 class="pull-left">獨立音樂活動清單</h1>

<div class="pull-left tabs">
<!-- 不同的分頁 -->
<span class="glyphicon glyphicon-th-large" @click="control.tab = 'all' "></span>
<span class="glyphicon glyphicon-star" @click="control.tab = 'star' "></span>
</div>

<div class="pull-right">
<!-- 不同的過濾器 -->
<span class="glyphicon glyphicon-time" @click="control.sort = 'time' "></span>
<span class="glyphicon glyphicon-yen" @click="control.sort = 'price' "></span>
<input type="text" v-model="control.filter" placeholder="過濾器">
</div>
</nav>

<main class="container">
<div class="items">
<article class="item" v-for="s in current_activities">

<header>
<h1>{{s.title}}</h1>
<div class="animation-swipe star" :class="{ favorite : favorite[s.uid] } " @click="toggle_like(s)">
<span class="glyphicon glyphicon-star"></span>
</div>
</header>

<dl>
<dt>時間</dt>
<dd>{{s.time}}</dd>
</dl>

<dl>
<dt>價錢</dt>
<dd>{{s.price}}</dd>
</dl>

<dl>
<dt>地點</dt>
<dd>{{s.address}}</dd>
</dl>

</article>
</div>
</main>

<footer class="container">
<span v-if="current_activities && current_activities.length ">{{total}}</span >
<span v-else>目前還沒有資料。</span >
</footer>

<nav class="container">
<h1 class="pull-left">獨立音樂活動清單</h1>

<div class="pull-left tabs">
<!-- 不同的分頁 -->
<span
class="glyphicon glyphicon-th-large"
@click="control.tab = 'all' "
></span>
<span
class="glyphicon glyphicon-star"
@click="control.tab = 'star' "
></span>
</div>

<div class="pull-right">
<!-- 不同的過濾器 -->
<span
class="glyphicon glyphicon-time"
@click="control.sort = 'time' "
></span>
<span
class="glyphicon glyphicon-yen"
@click="control.sort = 'price' "
></span>
<input type="text" v-model="control.filter" placeholder="過濾器" />
</div>
</nav>

<main class="container">
<div class="items">
<article class="item" v-for="s in current_activities">
<header>
<h1>{{s.title}}</h1>
<div
class="animation-swipe star"
:class="{ favorite : favorite[s.uid] } "
@click="toggle_like(s)"
>
<span class="glyphicon glyphicon-star"></span>
</div>
</header>

<dl>
<dt>時間</dt>
<dd>{{s.time}}</dd>
</dl>

<dl>
<dt>價錢</dt>
<dd>{{s.price}}</dd>
</dl>

<dl>
<dt>地點</dt>
<dd>{{s.address}}</dd>
</dl>
</article>
</div>
</main>

<footer class="container">
<span v-if="current_activities && current_activities.length "
>{{total}}</span
>
<span v-else>目前還沒有資料。</span>
</footer>
</div>



<script src="https://unpkg.com/jquery@3.3.1/dist/jquery.min.js"></script>
<script src="https://unpkg.com/bootstrap@3.3.5/dist/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/vue@3"></script>
<script>

$.getJSON("./show.min.json",function(json){

Vue.createApp({
data () {
return {
activities : json ,
favorite : {},
control : {
filter : "" ,
sort : "" ,
tab : "all" ,
}
}
},
methods : {

toggle_like : function (s){

this.favorite[s.uid] = this.favorite[s.uid] ? false : true

//this.$set(this.favorite, s.uid , this.favorite[s.uid] ? false : true )
console.log(this.favorite)
}
},
computed : {
total : function (){

var sum = 0
for (var i = 0 ; i < this.current_activities.length ; i++)
sum += this.current_activities[i].price
return sum

},
current_activities : function (){

var vm = this
var current = []

// Tab
switch (vm.control.tab){
case "all" :
current = vm.activities
break
case "star" :
current = vm.activities.filter(function(s){
return vm.favorite[s.uid]
})
}

// Filter
if (vm.control.filter && vm.control.filter.length > 0 ){
current = current.filter(function(s){
var search = vm.control.filter.toLowerCase()
var title = s.title.toLowerCase()
return title.indexOf(search) > -1
})
}

// Sort
switch (vm.control.sort){
case "time" :
current = current.sort(function(a,b){
return a.time.localeCompare(b.time )
})
break ;
case "price" :
current = current.sort(function(a,b){
return parseInt(a.price) - parseInt(b.price)
})
break ;
default : break ;
}
return current
}
}
}).mount('#app')
})
$.getJSON("./show.min.json", function (json) {
var app = Vue.createApp({
data() {
return {
activities: json,
favorite: {},
control: {
filter: "",
sort: "",
tab: "all"
}
};
},
methods: {
toggle_like: function (s) {
this.favorite[s.uid] = this.favorite[s.uid] ? false : true;

//this.$set(this.favorite, s.uid , this.favorite[s.uid] ? false : true )
console.log(this.favorite);
}
},
computed: {
total: function () {
var sum = 0;
for (var i = 0; i < this.current_activities.length; i++)
sum += this.current_activities[i].price;
return sum;
},
current_activities: function () {
var vm = this;
var current = [];

// Tab
switch (vm.control.tab) {
case "all":
current = vm.activities;
break;
case "star":
current = vm.activities.filter(function (s) {
return vm.favorite[s.uid];
});
}

// Filter
if (vm.control.filter && vm.control.filter.length > 0) {
current = current.filter(function (s) {
var search = vm.control.filter.toLowerCase();
var title = s.title.toLowerCase();
return title.indexOf(search) > -1;
});
}

// Sort
switch (vm.control.sort) {
case "time":
current = current.sort(function (a, b) {
return a.time.localeCompare(b.time);
});
break;
case "price":
current = current.sort(function (a, b) {
return parseInt(a.price) - parseInt(b.price);
});
break;
default:
break;
}
return current;
}
}
});

app.mount("#app");

console.log(app.control);
});
</script>

</body>
</html>
Loading