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 ）