1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

// <-----html----->
#app
  //** 範例一 **//
  p {{ a + b }}  //100300
  p {{ a * b }}  //30000
  p {{ a == b }}  //false

  //** 範例二 **//
  p(v-text="b" v-once)  //300

  //** 範例三 **//
  p {{ b.split() }}  //["300"] 

// <-----js----->
let app = new Vue({
  el: "#app",
  data:{
    a: 100,
    b: "300"
  }
});

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

// <-----html----->
#app
  //** 範例一 **//
  .box(:class="{'rotate':a}")

  //** 範例二 **//
  .box(:class="{ 'rotate':a , 'red':a }")
  .box(:class="b")

  //** 範例三 **//
  .box(:class="[ 'rotate' , 'red' ]")
  .box(:class="c")

  //** 範例四 **//
  .box(:class="d")
  button(@click="d.red = !d.red")

  //** 範例五 **//
  .box(:class="e")
  input(type="checkbox" v-model="e" value="red")

  //** 範例六 **//
  .box(:style="[{backgroundColor: 'red'},{transform: 'rotate(45deg)'}]")

// <-----css----->
.box
  width: 30px
  height: 30px
  border: solid 1px

.rotate
  transform: rotate(45deg)

.red
  background-color: red

// <-----js----->
let app = new Vue({
  el: "#app",
  data:{
    a: true,
    b: { rotate: true , red: true },
    c: [ 'rotate' , 'red' ],
    d: { red: false },
    e: []
  }
});

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

// <-----html----->
#app
  p(v-for="item in a") {{item.name}}  //蘋果  //香蕉  //鳳梨
  
  //** 範例一 **//
  template(v-for="item in a") {{item.name}}  //蘋果香蕉鳳梨
  
  //** 範例二 **//
  p(v-for="item in 5") {{item}}  //1  //2  //3  //4  //5
  
  //** 範例三 **//
  p(v-for="(item,key) in a") {{key}}  //0  //1  //2  
  p(v-for="(item,key) in b") {{key}}  //apple  //banana  //pineapple

  //** 範例四 **//
  p(v-for="item in a" v-if="item.amount > 200") {{item.name}}  //蘋果  //香蕉

// <-----js----->
let app = new Vue({
  el: "#app",
  data:{
    a:[
      {name: "蘋果" ,amount: 100},
      {name: "香蕉" ,amount: 300},
      {name: "鳳梨" ,amount: 500}
    ],
    b:{
      apple:{
        name: "蘋果",
        amount: 100
      },
      banana:{
        name: "香蕉",
        amount: 300
      },
      pineapple:{
        name: "鳳梨",
        amount: 500
      }
    }
  }
});

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

// <-----html----->
#app
  p(v-for="item in a") {{item.name}}
  button(@click="change") 按鈕
  
// <-----js----->
let app = new Vue({
  el: "#app",
  data:{
    a:[
      {name: "蘋果" ,amount: 100},
      {name: "香蕉" ,amount: 300},
      {name: "鳳梨" ,amount: 500}
    ]
  },
  methods:{
    change: function(){
      Vue.set( this.a , 0 , {name: "芭樂"} );
      //Vue.set( 傳入的目標 , key , 傳入的東西 );
    }
  }
});

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

// <-----html----->
#app
  input(type="text" v-model="c")
  button(@click="filter") 按鈕
  p(v-for="item in b") {{item.amount}}
  
// <-----js----->
let app = new Vue({
  el: "#app",
  data:{
    a:[
      {name: "蘋果" ,amount: 100},
      {name: "香蕉" ,amount: 300},
      {name: "鳳梨" ,amount: 500}
    ],
    b: [],
    c: ""
  },
  methods:{
    filter: function(){
      if(this.c == ""){
        return;
      }else{
        this.b = this.a.filter(item => item.name.match(this.c));
      }
    }
  }
});

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

// <-----html----->
#app
  button(@click="add") 增加
  span {{a}}
  button(@click="reduce") 減少

// <-----js----->
let app = new Vue({
  el: "#app",
  data:{
    a: 50
  },
  methods:{
    add: function(){
      this.a -= 1 ;
    },
    reduce: function(){
      this.a += 1 ;
    }
  }
});

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

// <-----html----->
ul#app
  li(v-for="item in a")
    button(@click="add(item)") 增加
    span {{item.amount}}
    button(@click="reduce(item)") 減少

// <-----js----->
let app = new Vue({
  el: "#app",
  data:{
    a:[
      {name: "蘋果" ,amount: 100},
      {name: "香蕉" ,amount: 300},
      {name: "鳳梨" ,amount: 500}
    ]
  },
  methods:{
    add: function(item){
      item.amount += 1;
    },
    reduce: function(item){
      item.amount -= 1;
    }
  }
});

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

// <-----html----->
#app
  input(v-model="b")
  p(v-for="item in filter") {{item.amount}}

// <-----js----->
let app = new Vue({
  el: "#app",
  data:{
    a:[
      {name:"蘋果",amount:100},
      {name:"香蕉",amount:300},
      {name:"鳳梨",amount:500},
    ],
    b: "",
  },
  computed:{
    filter: function(){
      if(this.b == ""){
        return;
      }else{
        return this.a.filter(item => item.name.match(this.b));
      }
    }  
  }
});

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

// <-----html----->
#app
  p {{nowDate}}

// <-----js----->
let app = new Vue({
  el: "#app",
  data:{
    a : 0
  },
  computed:{
    nowDate: function(){
      let date = new Date(this.a * 1000);
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate() + 1;
      let hours = date.getHours();
      let minutes = date.getMinutes();
      let seconds = date.getSeconds();
      return `${year}年${month}月${day}日${hours}時${minutes}分${seconds}秒`;
    }
  },
  mounted: function(){
    this.a = Math.floor(Date.now() / 1000);
  }
});

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

// <-----html----->
#app
  button(@click=" a = '已經送出' ") {{a}}
  //點擊送出→已經送出→再次送出→已經送出→再次送出...

// <-----js----->
var app = new Vue({
  el: "#app",
  data:{
    a: "點擊送出",
  },
  watch:{
    a: function(){
      setTimeout(() => {
        this.a = "再次送出";   
      },3000);
    }
  }
});