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

代码：

<template>
<div > <p>----------------------------------------------------------------------------------------------------------------------<p/><!-- input 框: trim 自动过滤用户输入的首尾空格 --><input v-model.trim="inputContent" placeholder=" 请输入 ... ">input 框内容为: {{ inputContent }}<p><p/><!-- 文本域 --><textarea v-model="textarea" placeholder="请输入 ... "></textarea>文本域 内容为： {{ textarea }}<p>----------------------------------------------------------------------------------------------------------------------<p/><!-- 复选框 --><p>单个复选框 （取逻辑值）：</p> <input type="checkbox" v-model="checked"><label>{{ checked }}</label><p>多个复选框 （绑定到同一个数组）：</p><input type="checkbox" value="我" v-model="checkedNames"><label>我</label><input type="checkbox" value="喜欢" v-model="checkedNames"><label>喜欢</label><input type="checkbox" value="小熊" v-model="checkedNames"><label>小熊</label><br><span>复选框数组的值为: {{ checkedNames }}</span><p>----------------------------------------------------------------------------------------------------------------------<p/><!-- 单选框 --><input type="radio"  value="是" v-model="picked"><label>是</label><br><input type="radio" value="否" v-model="picked"><label>否</label><br><span>单选框选中值为: {{ picked }}</span><p>----------------------------------------------------------------------------------------------------------------------<p/><!-- 下拉菜单 --><div id="app"><select v-model="selected"><option value="">---选水果啰---</option><option value="大柚子">大柚子</option><option value="小柚子">小柚子</option><option value="大大小小的柚子">大大小小的柚子</option></select><br/> <br/> <div id="output">选择的水果是: {{selected}} (啦啦啦，悄悄告诉你，反正我就是喜欢柚子 ...) </div></div><p>----------------------------------------------------------------------------------------------------------------------<p/></div>
</template><script type="text/javascript">export default {    data () {return {selected: '' ,picked : '是',checked : false,checkedNames: [],inputContent: '',textarea: ''}}
}</script>

运行效果：