【Vue】基本指令 v-for / v-if /v-on（事件處理） / methods/computed

V-for / V-if

• v-for 會把陣列中的「物件」抓出來
• v-for (item,index)的第二個自動就是會取到index，即使你亂取名字也ㄧ樣，例如換成（insdex,item)
• v-if 如果判斷式的結果true就渲染出來

<div id="app">
          <ul>
            <pre>{{list}}</pre>
            <li v-for="(item,index) in list" v-if="item.age<25">
              {{index+1}}：{{item.name}}的年齡是{{item.age}}
            </li>
          </ul>
        </div>

          var app = new Vue({
            el: '#app',
            data: {
              list: [{
                  name: '小明',
                  age: 16
                },
                {
                  name: '媽媽',
                  age: 38,
                },
                {
                  name: '漂亮阿姨',
                  age: 24
                }
              ]
            }
          })

Method語法

• v-on：在以往JQ註冊事件的方式是$(“XX”).on(“click”,function())在這邊是直接綁在html上
• Method中的函示，如果牽涉到資料讀取，ㄧ定要用this不然抓不到

        <div id="app">
          <input type="text"  v-model="text">
          <button  v-on:click="reverseText">反轉字串</button> //
          <div">
            {{ newText }}
          </div>
        </div>

  <script>
          var app = new Vue({
            el: '#app',
            data: {
              text: '',
              newText: ''
            },
            methods: {
                reverseText: function () {    //直接取名字
                this.newText = typeof (this.text)
                this.newText = this.text.split("").reverse().join("")
                console.log("hi", this.text)
                // 要讀取data的資料一定要用this
              }
            }
          });
</script>

Computed

• computed裡面宣告的是函式
• 可以把運算結果丟回宣告的變數中，並且render到畫面上，像是{{sayhello}}這樣
• 當data值有變化，computed才會重新計算
• computed如果要用到data的值一定要用this.目標，不然不知道你要找誰

var app = new Vue({
            el: '#app',
            data: {
              text: '',
              newText: ''
            },
            computed: {
              sayhello: function () {
                return this.text.split("").reverse().join("")
              }
            }
          });

​