Vue.js 极简小例：读值、样式调用、if判断、a 标签、点击事件、管道

<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>