前些天發現了一個巨牛的人工智能學習網站，通俗易懂，風趣幽默，忍不住分享一下給大家。點擊跳轉到教程。

代碼：

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

運行效果：