前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到教程。
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 )