Vue.js 極簡小例：讀值、樣式調用、if判斷、a 標簽、點擊事件、管道

1. 寫法：

<template>

<div id="app">

    <!-- 三目運算符使用 ‘ok’ 的值定義在 data 中-->
    {{ ok ? 'YES' : 'NO' }}<br><br>

    <!-- 修改樣式 class1 設置為 true 時顯示樣式
     (頁面上勾選單選框即設置為 true)-->
    <label for="r1">修改顏色</label><input type="checkbox" v-model="class1" id="r1">
    <br>
    <div v-bind:class="{'class1': class1}">
      我會變背景顏色
    </div>

    <!-- if判斷 -->
    <p v-if="seen"> seen 設置為true , 你就能看到我了 </p>

    <!-- 參數在指令后以冒號指明 1.‘ v-bind:href="url" ’可以簡寫為：‘ :href="url"’ 
     2.target參數作用：新窗口打開 --> 
    <pre><a v-bind:href="url" :target="target">這是鏈接</a></pre>

    <!-- 點擊事件 ‘v-on:click=’可以簡寫為：‘@click=’ -->
    <button v-on:click="doSomething">點擊事件</button>
    <br><br>

    <!-- 管道處理數據 message 原值：this (slice方法是切片，去掉前n位字母) -->
    {{ message | capitalize }}

</div>

</template>

<script>

export default {
  name: 'APP-two',
  data () {
    return {
      ok: true,
      class1: false,
      seen: true,
      url: 'https://blog.csdn.net/jiangyu1013',
      target:'_blank',
      message:'this'
    }
  },
  methods: {
     doSomething: function() {
       alert(" 我要給小熊造一個完美世界！");
    }
  },
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(3).toUpperCase() + value.slice(1)
    }
  }
}

</script>

<style>
.class1{
  background: #444;
  color:white
}
</style>

2. 運行效果：（seen 設置為 true ）