一、sorted面試題
面試題：
[11, 33, 4, 2, 11, 4, 9, 2] 去重並保持原來的順序
答案1：
list1 = [11, 33, 4, 2, 11, 4, 9, 2] ret = set(list1) list2 = [] for i in list1: if i not in list2: list2.append(i) print(list2)
執行輸出：
[11, 33, 4, 2, 9]
答案2：
list1 = [11, 33, 4, 2, 11, 4, 9, 2] ret = list(set(list1)) ret2 = sorted(ret,key=list1.index) print(ret2)
執行輸出：
[11, 33, 4, 2, 9]
說明：list1.index接收的參數，是ret里面的每一個元素。
index() 函數用於從列表中找出某個值第一個匹配項的索引位置。
擴展題：
按照年齡從小到大排序
list3 = [{"name":"zhang","age":30},{"name":"lisi","age":18},{"name":"wang","age":29}]
答案：
list3 = [{"name":"zhang","age":30},{"name":"lisi","age":18},{"name":"wang","age":29}]
ret3 = sorted(list3,key=lambda x:x["age"])
print(ret3)
執行輸出：
[{'age': 18, 'name': 'lisi'}, {'age': 29, 'name': 'wang'}, {'age': 30, 'name': 'zhang'}]
二、Pycharm配置支持vue語法
PyCharm 2017.1 EAP 8 發布了，這是 PyCharm 2017.1 的第 8 個 Early Access Program (EAP) 版。本次主要更新如下：
新特性：
Vue.js 初始支持。Vue 是一個 MVVM（Model-View-ViewModel）JavaScript 框架，它變得越來越流行。要使用該功能，需要先安裝 Vue.js 插件。可通過 Settings | Plugins | Install JetBrains Plugins，然后選擇 Vue.js 進行安裝。（僅限專業版使用）
點擊File-->Settings，搜索vue
點擊安裝
重啟pycharm
再次查看，就有了
三、Vue基礎語法
Vue 實例
創建一個 Vue 實例
每個 Vue 應用都是通過用 Vue 函數創建一個新的 Vue 實例開始的：
語法：
var vm = new Vue({ // 選項 })
數據與方法
當一個 Vue 實例被創建時，它向 Vue 的響應式系統中加入了其 data 對象中能找到的所有的屬性。當這些屬性的值發生改變時，視圖將會產生“響應”，即匹配更新為新的值。
舉例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 開發環境版本，包含了有幫助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <p>name:{{name}}</p> <span>age:{{age}}</span> </div> <script> // 我們的數據對象 var d = {name:'xiao',age:23}; // 該對象被加入到一個 Vue 實例中 var app = new Vue({ el:"#app", //關聯dom對象 data:d }) </script> </body> </html>
訪問網頁：
當這些數據改變時，視圖會進行重渲染。值得注意的是只有當實例被創建時 d 中存在的屬性才是響應式的。
舉例：
使用瀏覽器控制台修改age時，頁面會發生改變
模板語法
Vue.js 使用了基於 HTML 的模板語法，允許開發者聲明式地將 DOM 綁定至底層 Vue 實例的數據。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循規范的瀏覽器和 HTML 解析器解析。
在底層的實現上，Vue 將模板編譯成虛擬 DOM 渲染函數。結合響應系統，Vue 能夠智能地計算出最少需要重新渲染多少組件，並把 DOM 操作次數減到最少。
如果你熟悉虛擬 DOM 並且偏愛 JavaScript 的原始力量，你也可以不用模板，直接寫渲染 (render) 函數，使用可選的 JSX 語法。
原始 HTML
雙大括號會將數據解釋為普通文本，而非 HTML 代碼。為了輸出真正的 HTML，你需要使用 v-html 指令：
舉例：使用普通方法渲染
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 開發環境版本，包含了有幫助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <p>{{message}}</p> </div> <script> var app = new Vue({ el:"#app", //關聯dom對象 data:{ message:'<a href="http://www.py3study.com/">點擊</a>' } }) </script> </body> </html>
刷新網頁，效果如下：
網頁的內容，並不是我們想要的，它應該是一個a標簽才對。
修改html，使用v-html。注意：不需要使用{{ }}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 開發環境版本，包含了有幫助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <p v-html="message"></p> </div> <script> var app = new Vue({ el:"#app", //關聯dom對象 data:{ message:'<a href="http://www.py3study.com/">點擊</a>' } }) </script> </body> </html>
刷新網頁，效果如下：
使用 JavaScript 表達式
迄今為止，在我們的模板中，我們一直都只綁定簡單的屬性鍵值。但實際上，對於所有的數據綁定，Vue.js 都提供了完全的 JavaScript 表達式支持。
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>
這些表達式會在所屬 Vue 實例的數據作用域下作為 JavaScript 被解析。有個限制就是，每個綁定都只能包含單個表達式。
舉例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 開發環境版本，包含了有幫助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <!-- 使用空格切割,reverse顛倒數組中元素的順序,join('')將數組轉換為字符串 --> <p>{{ message.split('').reverse().join('') }}</p> </div> <script> var app = new Vue({ el:"#app", //關聯dom對象 data:{ message:'旺財' } }) </script> </body> </html>
刷新網頁，效果如下：
指令
指令 (Directives) 是帶有 v- 前綴的特殊特性。指令特性的值預期是單個 JavaScript 表達式 (v-for 是例外情況，稍后我們再討論)。指令的職責是，當表達式的值改變時，將其產生的連帶影響，響應式地作用於 DOM。
舉例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 開發環境版本，包含了有幫助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <!--判斷ok變量是否為true--> <p v-if="ok">帶你裝逼,帶你飛</p> </div> <script> var app = new Vue({ el:"#app", //關聯dom對象 data:{ ok:true } }) </script> </body> </html>
這里，v-if 指令將根據表達式 ok 的值的真假來插入/移除 <p> 元素。
刷新網頁，效果如下：
如果ok的值為false，那么就不會顯示p標簽
查看網頁的html代碼，發現p標簽消失了
參數
一些指令能夠接收一個“參數”，在指令名稱之后以冒號表示。例如，v-bind 指令可以用於響應式地更新 HTML 特性：
語法：
<a v-bind:href="url">...</a>
在這里 href 是參數，告知 v-bind 指令將該元素的 href 特性與表達式 url 的值綁定。
舉例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 開發環境版本，包含了有幫助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <a v-bind="url">來嘛,點我呀!</a> </div> <script> var app = new Vue({ el:"#app", //關聯dom對象 data:{ url:'http://www.py3study.com/' } }) </script> </body> </html>
刷新網頁，效果如下：
網頁是不能點擊的，綁定href特性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 開發環境版本，包含了有幫助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <a v-bind:href="url">來嘛,點我呀!</a> </div> <script> var app = new Vue({ el:"#app", //關聯dom對象 data:{ url:'http://www.py3study.com/' } }) </script> </body> </html>
刷新網頁，效果如下：
另一個例子是 v-on 指令，它用於監聽 DOM 事件：
語法：
<a v-on:click="doSomething">...</a>
在這里參數是監聽的事件名。我們也會更詳細地討論事件處理。
舉例：阻止默認的表單提交，使用自定義的方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 開發環境版本，包含了有幫助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <!-- 監聽submit事件,觸發onSubmit(自定義方法) --> <form action="" v-on:submit.prevent="onSubmit"> <input type="text" name="name"> <input type="submit" value="提交"> </form> </div> <script> var app = new Vue({ el:"#app", //關聯dom對象 data:{ url:'http://www.py3study.com/' }, //定義方法 methods:{ onSubmit:function () { alert("不許刷新頁面") } } }) </script> </body> </html>
刷新網頁，點擊提交，效果如下：
計算屬性和偵聽器
計算屬性
模板內的表達式非常便利，但是設計它們的初衷是用於簡單運算的。在模板中放入太多的邏輯會讓模板過重且難以維護。例如：
<div id="example"> {{ message.split('').reverse().join('') }} </div>
在這個地方，模板不再是簡單的聲明式邏輯。你必須看一段時間才能意識到，這里是想要顯示變量 message 的翻轉字符串。當你想要在模板中多次引用此處的翻轉字符串時，就會更加難以處理。
所以，對於任何復雜邏輯，你都應當使用計算屬性。
舉例：普通寫法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 開發環境版本，包含了有幫助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <p>{{ message.split('').reverse().join('') }}</p> </div> <script> var app = new Vue({ el:"#app", //關聯dom對象 data:{ message:'旺財' }, }) </script> </body> </html>
上面的代碼，看這不夠簡潔。涉及到復雜邏輯時，應該使用計算屬性。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 開發環境版本，包含了有幫助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <p>{{ reversedMessage }}</p> </div> <script> var app = new Vue({ el: "#app", //關聯dom對象 data: { message: '旺財' }, //定義計算屬性 computed: { // 計算屬性的 getter reversedMessage: function () { // `this` 指向 app 實例 return this.message.split('').reverse().join('') } } }) </script> </body> </html>
刷新網頁，效果同上！
計算屬性緩存 vs 方法
你可能已經注意到我們可以通過在表達式中調用方法來達到同樣的效果：
<p>Reversed message: "{{ reversedMessage() }}"</p>
在組件中
// 在組件中 methods: { reversedMessage: function () { return this.message.split('').reverse().join('') } }
我們可以將同一函數定義為一個方法而不是一個計算屬性。兩種方式的最終結果確實是完全相同的。然而，不同的是計算屬性是基於它們的依賴進行緩存的。計算屬性只有在它的相關依賴發生改變時才會重新求值。這就意味着只要 message 還沒有發生改變，多次訪問 reversedMessage 計算屬性會立即返回之前的計算結果，而不必再次執行函數。
舉例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 開發環境版本，包含了有幫助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <p>{{ reversedMessage }}</p> <!-- 調用方法，使用括號 --> <p>{{reversedMessage2()}}</p> </div> <script> var app = new Vue({ el: "#app", //關聯dom對象 data: { message: '旺財' }, //定義計算屬性 computed: { // 計算屬性的 getter reversedMessage: function () { // `this` 指向 app 實例 console.log("這是計算屬性..."); return this.message.split('').reverse().join('') } }, methods:{ reversedMessage2:function () { console.log("這是方法..."); return this.message.split('').reverse().join('') } }, }) </script> </body> </html>
刷新網頁，使用瀏覽器控制台，修改message的值。並分別調用屬性和方法。
發現，調用計算屬性時，它沒有執行console.log代碼。而調用方法時，執行了console.log代碼。
所以：計算屬性，只要數據不變化，它不會執行，直接使用緩存。
計算屬性 vs 偵聽屬性
Vue 提供了一種更通用的方式來觀察和響應 Vue 實例上的數據變動：偵聽屬性。當你有一些數據需要隨着其它數據變動而變動時，你很容易濫用 watch——特別是如果你之前使用過 AngularJS。然而，通常更好的做法是使用計算屬性而不是命令式的 watch 回調。細想一下這個例子：
html代碼：
<div id="demo">{{ fullName }}</div>
js代碼：
var vm = new Vue({ el: '#demo', data: { firstName: 'Foo', lastName: 'Bar', fullName: 'Foo Bar' }, watch: { firstName: function (val) { this.fullName = val + ' ' + this.lastName }, lastName: function (val) { this.fullName = this.firstName + ' ' + val } } })
上面代碼是命令式且重復的。將它與計算屬性的版本進行比較：
var vm = new Vue({ el: '#demo', data: { firstName: 'Foo', lastName: 'Bar' }, computed: { fullName: function () { return this.firstName + ' ' + this.lastName } } })
好得多了，不是嗎？
舉例：顯示全名
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>偵聽器</title> <!-- 開發環境版本，包含了有幫助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <p>{{quanming2}}</p> </div> <script> var app = new Vue({ el: "#app", data: { ming: '海燕', //名 xing: '趙', //姓 quanming: '趙 世奇' //姓名 }, computed:{ // 計算屬性 quanming2: function () { //組合姓名 return this.xing + " " + this.ming } }, watch: { xing: function (val) { //當姓改變時,更新全名 this.quanming = val + " " + this.ming }, ming: function (val) { //當名改變時,更新全名 this.quanming = this.xing + " " + val } } }) </script> </body> </html>
訪問網頁，效果如下：
使用瀏覽器控制台，修改姓
使用瀏覽器控制台，修改名
Class 與 Style 綁定
操作元素的 class 列表和內聯樣式是數據綁定的一個常見需求。因為它們都是屬性，所以我們可以用 v-bind 處理它們：只需要通過表達式計算出字符串結果即可。不過，字符串拼接麻煩且易錯。因此，在將 v-bind 用於 class 和 style 時，Vue.js 做了專門的增強。表達式結果的類型除了字符串之外，還可以是對象或數組。
綁定 HTML Class
對象語法
我們可以傳給 v-bind:class 一個對象，以動態地切換 class：
<div v-bind:class="{ active: isActive }"></div>
上面的語法表示 active 這個 class 存在與否將取決於數據屬性 isActive 的 truthiness。
你可以在對象中傳入更多屬性來動態切換多個 class。此外，v-bind:class 指令也可以與普通的 class 屬性共存。
舉例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 開發環境版本，包含了有幫助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <style> /*紅色圓*/ .c { height: 150px; width: 150px; border-radius: 50%; background-color: red; } /*綠色背景*/ .c1 { background-color: green; } </style> </head> <body> <div id="app"> <!-- 當ok的值為true時,增加class屬性c1 --> <div class="c" v-bind:class="{c1:ok}"></div> </div> <script> var app = new Vue({ el: '#app', data: { ok: true, }, }) </script> </body> </html>
刷新網頁，效果如下：
使用控制台工具，修改ok的值
如何做到，點擊圓時，就變換顏色呢？
將當前值取反就可以了，使用!this.ok
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 開發環境版本，包含了有幫助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <style> /*紅色圓*/ .c { height: 150px; width: 150px; border-radius: 50%; background-color: red; } /*綠色背景*/ .c1 { background-color: green; } </style> </head> <body> <div id="app"> <!-- 當ok的值為true時,增加class屬性c1。監聽點擊事件 --> <div class="c" v-bind:class="{c1:ok}" v-on:click="change"></div> </div> <script> var app = new Vue({ el: '#app', data: { ok: true, }, methods:{ change:function () { //!this.ok 表示取反 this.ok = !this.ok } } }) </script> </body> </html>
刷新網頁，效果如下：
條件渲染
v-if
在字符串模板中，比如 Handlebars，我們得像這樣寫一個條件塊：
<!-- Handlebars 模板 --> {{#if ok}} <h1>Yes</h1> {{/if}}
在 Vue 中，我們使用 v-if 指令實現同樣的功能：
<h1 v-if="ok">Yes</h1>
也可以用 v-else 添加一個"else 塊"：
<h1 v-if="ok">Yes</h1> <h1 v-else>No</h1>
v-else 元素必須緊跟在帶 v-if 或者 v-else-if 的元素的后面，否則它將不會被識別。
舉例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 開發環境版本，包含了有幫助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <style> /*紅色圓*/ .c { height: 150px; width: 150px; border-radius: 50%; background-color: red; } /*綠色背景*/ .c1 { background-color: green; } </style> </head> <body> <div id="app"> <p v-if="ok">想要帶你去浪漫的土耳其</p> <p v-else>呵呵,python學不好,還想泡妹子,做夢!</p> </div> <script> var app = new Vue({ el: '#app', data: { ok: true, }, }) </script> </body> </html>
刷新網頁，效果如下：
使用瀏覽器控制台，修改ok的值
使用 v-if 條件渲染分組
因為 v-if 是一個指令，所以必須將它添加到一個元素上。但是如果想切換多個元素呢？此時可以把一個 <template> 元素當做不可見的包裹元素，並在上面使用 v-if。最終的渲染結果將不包含 <template> 元素。
<template v-if="ok"> <h1>Title</h1> <p>Paragraph 1</p> <p>Paragraph 2</p> </template>
舉例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 開發環境版本，包含了有幫助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <template v-if="ok"> <p>世情薄，人情惡，雨送黃昏花易落</p> <p>曉風干，淚痕殘</p> <p>欲箋心事，獨語斜闌</p> <p>難，難，難！</p> </template> </div> <script> var app = new Vue({ el: '#app', data: { ok: true, }, }) </script> </body> </html>
刷新網頁，效果如下：
查看瀏覽器html代碼
v-show
另一個用於根據條件展示元素的選項是 v-show 指令。用法大致一樣：
<h1 v-show="ok">Hello!</h1>
不同的是帶有 v-show 的元素始終會被渲染並保留在 DOM 中。v-show 只是簡單地切換元素的 CSS 屬性 display。
注意，v-show 不支持 <template> 元素，也不支持 v-else。
舉例：
使用瀏覽器工具，修改ok的值
發現消失了，查看html代碼，增加了屬性display:none
v-if vs v-show
v-if 是“真正”的條件渲染，因為它會確保在切換過程中條件塊內的事件監聽器和子組件適當地被銷毀和重建。
v-if 也是惰性的：如果在初始渲染時條件為假，則什么也不做——直到條件第一次變為真時，才會開始渲染條件塊。
相比之下，v-show 就簡單得多——不管初始條件是什么，元素總是會被渲染，並且只是簡單地基於 CSS 進行切換。
一般來說，v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用 v-show 較好；如果在運行時條件很少改變，則使用 v-if 較好。
列表渲染
用 v-for 把一個數組對應為一組元素
我們用 v-for 指令根據一組數組的選項列表進行渲染。v-for 指令需要使用 item in items 形式的特殊語法，items 是源數據數組並且 item 是數組元素迭代的別名。
html代碼：
<ul id="example-1"> <li v-for="item in items"> {{ item.message }} </li> </ul>
js代碼：
var example1 = new Vue({ el: '#example-1', data: { items: [ { message: 'Foo' }, { message: 'Bar' } ] } })
舉例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 開發環境版本，包含了有幫助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <ul> <li v-for="i in list">{{ i }}</li> </ul> </div> <script> var app = new Vue({ el: '#app', data: { list: [ "吃飯","睡覺","打豆豆" ], }, }) </script> </body> </html>
刷新網頁，效果如下：
增加一個元素
一個對象的 v-for
你也可以用 v-for 通過一個對象的屬性來迭代。
html代碼：
<ul id="v-for-object" class="demo"> <li v-for="value in object"> {{ value }} </li> </ul>
js代碼：
new Vue({ el: '#v-for-object', data: { object: { firstName: 'John', lastName: 'Doe', age: 30 } } })
舉例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 開發環境版本，包含了有幫助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <ul> <li v-for="v,k,i in obj">No {{ i }}:{{k}}:{{v}}</li> </ul> </div> <script> var app = new Vue({ el: '#app', data: { obj: { name:"xiao",age:23 } }, }) </script> </body> </html>
刷新網頁，效果如下：
表單輸入綁定
基礎用法
你可以用 v-model 指令在表單 <input> 及 <textarea> 元素上創建雙向數據綁定。它會根據控件類型自動選取正確的方法來更新元素。盡管有些神奇，但 v-model 本質上不過是語法糖。它負責監聽用戶的輸入事件以更新數據，並對一些極端場景進行一些特殊處理。
v-model 會忽略所有表單元素的 value、checked、selected 特性的初始值而總是將 Vue 實例的數據作為數據來源。你應該通過 JavaScript 在組件的 data 選項中聲明初始值。
文本
<input v-model="message" placeholder="edit me"> <p>Message is: {{ message }}</p>
舉例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 開發環境版本，包含了有幫助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <input type="text" v-model="message"> <p>{{message}}</p> </div> <script> var app = new Vue({ el: '#app', data: { message:'' }, }) </script> </body> </html>
刷新網頁，效果如下：
復選框
單個復選框，綁定到布爾值：
html代碼：
<input type="checkbox" id="checkbox" v-model="checked"> <label for="checkbox">{{ checked }}</label>
多個復選框，綁定到同一個數組：
html代碼：
<div id='example-3'> <input type="checkbox" id="jack" value="Jack" v-model="checkedNames"> <label for="jack">Jack</label> <input type="checkbox" id="john" value="John" v-model="checkedNames"> <label for="john">John</label> <input type="checkbox" id="mike" value="Mike" v-model="checkedNames"> <label for="mike">Mike</label> <br> <span>Checked names: {{ checkedNames }}</span> </div>
js代碼：
new Vue({ el: '#example-3', data: { checkedNames: [] } })
舉例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 開發環境版本，包含了有幫助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <div id='example-3'> <input type="checkbox" id="jack" value="basketball" v-model="hobby"> <label for="jack">籃球</label> <input type="checkbox" id="john" value="football" v-model="hobby"> <label for="john">足球</label> <input type="checkbox" id="mike" value="doublecolorball" v-model="hobby"> <label for="mike">雙色球</label> <br> <span>我的愛好: {{ hobby }}</span> </div> </div> <script> var app = new Vue({ el: "#app", data: { message: '', hobby:[] } }) </script> </body> </html>
刷新網頁，效果如下：
修飾符
.trim
如果要自動過濾用戶輸入的首尾空白字符，可以給 v-model 添加 trim 修飾符：
語法：
<input v-model.trim="msg">
舉例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 開發環境版本，包含了有幫助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <input type="text" v-model.trim="message"> <p>{{message}}</p> </div> <script> var app = new Vue({ el: "#app", data: { message: '', } }) </script> </body> </html>
刷新網頁，效果如下：
查看網頁html，發現左右2邊的空格，給過濾掉了！
四、小清單練習
先來看一下效果：
准備html代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>小清單</title> <!--bootstrap--> <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"> <!-- 開發環境版本，包含了有幫助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div class="container"> <div class="row"> <!--col-md-offset-3 向右移動3個格子。--> <div id="app" class="col-md-6 col-md-offset-3" style="margin-top: 70px"> <!--面板開始--> <div class="panel panel-info"> <div class="panel-heading"> <h3 class="panel-title">小清單</h3> </div> <div class="panel-body"> <!-- 輸入框 開始--> <div class="input-group"> <input type="text" class="form-control" placeholder="Search for..."/> <span class="input-group-btn"> <button class="btn btn-default" type="button"> <!--glyphicon glyphicon-plus加號圖標--> <span class="glyphicon glyphicon-plus"></span> </button> </span> </div> <!-- 輸入框 結束--> <hr/> <!--列表組 開始--> <div class="list-group"> <div class="list-group-item"> <!--glyphicon glyphicon-ok-sign勾選圖標--> <span class="glyphicon glyphicon-ok-sign"> </span> 吃飯 <!--glyphicon glyphicon-remove刪除圖標，pull-right表示右對齊--> <span class="glyphicon glyphicon-remove pull-right"></span> </div> </div> <!--列表組 結束--> </div> </div> <!--面板結束--> </div> </div> </div> </body> </html>
刷新網頁，效果如下：
點擊勾選變綠
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>小清單</title> <!--bootstrap--> <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"> <!-- 開發環境版本，包含了有幫助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <style> /*first-child選擇屬於其父元素的首個子元素的每個 <span> 元素，並為其設置樣式：*/ .c1> span:first-child { color: green; } </style> </head> <body> <div class="container"> <div class="row"> <!--col-md-offset-3 向右移動3個格子。--> <div id="app" class="col-md-6 col-md-offset-3" style="margin-top: 70px"> <!--面板開始--> <div class="panel panel-info"> <div class="panel-heading"> <h3 class="panel-title">小清單</h3> </div> <div class="panel-body"> <!-- 輸入框 開始--> <div class="input-group"> <input type="text" class="form-control" placeholder="Search for..."/> <span class="input-group-btn"> <button class="btn btn-default" type="button"> <!--glyphicon glyphicon-plus加號圖標--> <span class="glyphicon glyphicon-plus"></span> </button> </span> </div> <!-- 輸入框 結束--> <hr/> <!--列表組 開始--> <div class="list-group"> <!--v-bind:class動態地增加 class c1--> <div class="list-group-item" v-bind:class="{c1:ok}"> <!--glyphicon glyphicon-ok-sign勾選圖標--> <!--v-on:click綁定點擊事件--> <span v-on:click="bianlv" class="glyphicon glyphicon-ok-sign"> </span> 吃飯 <!--glyphicon glyphicon-remove刪除圖標，pull-right表示右對齊--> <span class="glyphicon glyphicon-remove pull-right"></span> </div> </div> <!--列表組 結束--> </div> </div> <!--面板結束--> </div> </div> </div> <script> var app = new Vue({ el: '#app', data: { ok:false, }, methods: { bianlv:function () { this.ok=true; //更改為true } } }) </script> </body> </html>
刷新網頁，點擊勾選按鈕，就會變綠
當ok值為true時增加class c1，否則沒有class c1
無限增加選項
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>小清單</title> <!--bootstrap--> <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"> <!-- 開發環境版本，包含了有幫助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <style> /*first-child選擇屬於其父元素的首個子元素的每個 <span> 元素，並為其設置樣式：*/ .c1> span:first-child { color: green; } </style> </head> <body> <div class="container"> <div class="row"> <!--col-md-offset-3 向右移動3個格子。--> <div id="app" class="col-md-6 col-md-offset-3" style="margin-top: 70px"> <!--面板開始--> <div class="panel panel-info"> <div class="panel-heading"> <h3 class="panel-title">小清單</h3> </div> <div class="panel-body"> <!-- 輸入框 開始--> <div class="input-group"> <!--v-model創建雙向數據綁定，它會根據控件類型自動選取正確的方法來更新元素--> <input v-model="newItem.title" type="text" class="form-control" placeholder="Search for..."/> <span class="input-group-btn"> <!--v-on:click監聽點擊事件,add表示自定義的方法--> <button v-on:click="add" class="btn btn-default" type="button"> <!--glyphicon glyphicon-plus加號圖標--> <span class="glyphicon glyphicon-plus"></span> </button> </span> </div> <!-- 輸入框 結束--> <hr/> <!--列表組 開始--> <div class="list-group"> <!--用 v-for 把一個數組對應為一組元素,item為元素,index為索引--> <!--v-bind:class動態地增加 class c1,當item.ok為true時,增加class--> <div v-for="(item,index) in todoList" v-bind:class="{c1: item.ok}" class="list-group-item"> <!--v-on:click綁定點擊事件,index表示for循環的索引--> <!--glyphicon glyphicon-ok-sign勾選圖標--> <span v-on:click="bianlv(index)" class="glyphicon glyphicon-ok-sign"> </span> <!--顯示title--> {{item.title}} <!--glyphicon glyphicon-remove刪除圖標，pull-right表示右對齊--> <span class="glyphicon glyphicon-remove pull-right"></span> </div> </div> <!--列表組 結束--> </div> </div> <!--面板結束--> </div> </div> </div> <script> var app = new Vue({ el: '#app', data: { todoList: [], //空數組 newItem: { //每一增加的項目，都是獨立的 title: '', //標題默認值 ok: false, //默認為false,為true時，變成綠色 } }, methods: { bianlv:function (index) { //變綠 // alert(index); // 在這里面怎么知道我點擊的是哪個待辦事項 // 根據索引去todoList里面找對應的待辦事項，把它的ok屬性變為投入true this.todoList[index].ok = true }, add:function () { // Object.assign({},obj,obj1);表示深拷貝,花括號叫目標對象，后面的obj、obj1是源對象 // 把新待辦事項添加到todoList // 將this.newItem 深拷貝之后 傳到 todoList var obj = Object.assign({}, this.newItem); this.todoList.push(obj); //追加到數組中 this.newItem.title = ''; //清空輸入框 }, } }) </script> </body> </html>
刷新網頁，增加幾個，效果如下：
刪除選項
刪除數組，使用splice
splice() 方法可刪除從 index 處開始的零個或多個元素，並且用參數列表中聲明的一個或多個值來替換那些被刪除的元素。
如果從 arrayObject 中刪除了元素，則返回的是含有被刪除的元素的數組
舉例：
a.splice(1,1) 左邊的1，表示從索引值為1的元素開始刪除，1對應的元素為22。注意：索引是從0開始計算的
右邊的1表示，刪除1個元素。也就是把22給刪除了。
執行之后，返回的結果是被刪除的元素
所以最后查看a時，只有3個元素。
舉例：
由於只有參數1，表示將索引為1后面的所有元素刪除。
所有a只有一個元素11
修改html代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>小清單</title> <!--bootstrap--> <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"> <!-- 開發環境版本，包含了有幫助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <style> /*first-child選擇屬於其父元素的首個子元素的每個 <span> 元素，並為其設置樣式：*/ .c1> span:first-child { color: green; } </style> </head> <body> <div class="container"> <div class="row"> <!--col-md-offset-3 向右移動3個格子。--> <div id="app" class="col-md-6 col-md-offset-3" style="margin-top: 70px"> <!--面板開始--> <div class="panel panel-info"> <div class="panel-heading"> <h3 class="panel-title">小清單</h3> </div> <div class="panel-body"> <!-- 輸入框 開始--> <div class="input-group"> <!--v-model創建雙向數據綁定，它會根據控件類型自動選取正確的方法來更新元素--> <input v-model="newItem.title" type="text" class="form-control" placeholder="Search for..."/> <span class="input-group-btn"> <!--v-on:click監聽點擊事件,add表示自定義的方法--> <button v-on:click="add" class="btn btn-default" type="button"> <!--glyphicon glyphicon-plus加號圖標--> <span class="glyphicon glyphicon-plus"></span> </button> </span> </div> <!-- 輸入框 結束--> <hr/> <!--列表組 開始--> <div class="list-group"> <!--用 v-for 把一個數組對應為一組元素,item為元素,index為索引--> <!--v-bind:class動態地增加 class c1,當item.ok為true時,增加class--> <div v-for="(item,index) in todoList" v-bind:class="{c1: item.ok}" class="list-group-item"> <!--v-on:click綁定點擊事件,index表示for循環的索引--> <!--glyphicon glyphicon-ok-sign勾選圖標--> <span v-on:click="bianlv(index)" class="glyphicon glyphicon-ok-sign"> </span> <!--顯示title--> {{item.title}} <!--v-on:click綁定點擊事件,index表示for循環的索引--> <!--glyphicon glyphicon-remove刪除圖標，pull-right表示右對齊--> <span v-on:click="remove(index)" class="glyphicon glyphicon-remove pull-right"></span> </div> </div> <!--列表組 結束--> </div> </div> <!--面板結束--> </div> </div> </div> <script> var app = new Vue({ el: '#app', data: { todoList: [], //空數組 newItem: { //每一增加的項目，都是獨立的 title: '', //標題默認值 ok: false, //默認為false,為true時，變成綠色 } }, methods: { bianlv:function (index) { //變綠 // alert(index); // 在這里面怎么知道我點擊的是哪個待辦事項 // 根據索引去todoList里面找對應的待辦事項，把它的ok屬性變為投入true this.todoList[index].ok = true }, add:function () { // Object.assign({},obj,obj1);表示深拷貝,花括號叫目標對象，后面的obj、obj1是源對象 // 把新待辦事項添加到todoList // 將this.newItem 深拷貝之后 傳到 todoList var obj = Object.assign({}, this.newItem); this.todoList.push(obj); //追加到數組中 this.newItem.title = ''; //清空輸入框 }, remove:function (index) { //刪除選項 console.log(index); //刪除一個索引值 this.todoList.splice(index,1) } } }) </script> </body> </html>
刷新頁面，添加3個元素
然后刪除中間一個
它返回的索引為1，表示第二個元素
顏色取消和增加刪除線
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>小清單</title> <!--bootstrap--> <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"> <!-- 開發環境版本，包含了有幫助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <style> /*first-child選擇屬於其父元素的首個子元素的每個 <span> 元素，並為其設置樣式：*/ .c1> span:first-child { color: green; } /*刪除線*/ .c2 { text-decoration:line-through; } </style> </head> <body> <div class="container"> <div class="row"> <!--col-md-offset-3 向右移動3個格子。--> <div id="app" class="col-md-6 col-md-offset-3" style="margin-top: 70px"> <!--面板開始--> <div class="panel panel-info"> <div class="panel-heading"> <h3 class="panel-title">小清單</h3> </div> <div class="panel-body"> <!-- 輸入框 開始--> <div class="input-group"> <!--v-model創建雙向數據綁定，它會根據控件類型自動選取正確的方法來更新元素--> <input v-model="newItem.title" type="text" class="form-control" placeholder="Search for..."/> <span class="input-group-btn"> <!--v-on:click監聽點擊事件,add表示自定義的方法--> <button v-on:click="add" class="btn btn-default" type="button"> <!--glyphicon glyphicon-plus加號圖標--> <span class="glyphicon glyphicon-plus"></span> </button> </span> </div> <!-- 輸入框 結束--> <hr/> <!--列表組 開始--> <div class="list-group"> <!--用 v-for 把一個數組對應為一組元素,item為元素,index為索引--> <!--v-bind:class動態地增加 class c1,當item.ok為true時,增加class--> <div v-for="(item,index) in todoList" v-bind:class="{c1: item.ok}" class="list-group-item"> <!--v-on:click綁定點擊事件,index表示for循環的索引--> <!--glyphicon glyphicon-ok-sign勾選圖標--> <span v-on:click="bianlv(index)" class="glyphicon glyphicon-ok-sign"></span> <!--顯示title--> <!--v-bind:class,動態增加刪除線--> <span v-on:click="strickout(index)" v-bind:class="{c2: item.to}" style="margin-left: 10px;">{{item.title}}</span> <!--v-on:click綁定點擊事件,index表示for循環的索引--> <!--glyphicon glyphicon-remove刪除圖標，pull-right表示右對齊--> <span v-on:click="remove(index)" class="glyphicon glyphicon-remove pull-right"></span> </div> </div> <!--列表組 結束--> </div> </div> <!--面板結束--> </div> </div> </div> <script> var app = new Vue({ el: '#app', data: { todoList: [], //空數組 newItem: { //每一增加的項目，都是獨立的 title: '', //標題默認值 ok: false, //默認為false,為true時，變成綠色 to: false, } }, methods: { bianlv:function (index) { //變綠 // alert(index); // 在這里面怎么知道我點擊的是哪個待辦事項 // 根據索引去todoList里面找對應的待辦事項，把它的ok屬性變為投入true // !this.todoList[index].ok 表示取反 this.todoList[index].ok = !this.todoList[index].ok }, add:function () { // Object.assign({},obj,obj1);表示深拷貝,花括號叫目標對象，后面的obj、obj1是源對象 // 把新待辦事項添加到todoList // 將this.newItem 深拷貝之后 傳到 todoList var obj = Object.assign({}, this.newItem); this.todoList.push(obj); //追加到數組中 this.newItem.title = ''; //清空輸入框 }, remove:function (index) { //刪除選項 console.log(index); //刪除一個索引值 this.todoList.splice(index,1) }, strickout:function (index) { //刪除線 console.log(index); // !this.todoList[index].to 表示取反 this.todoList[index].to = !this.todoList[index].to } } }) </script> </body> </html>
刷新網頁，效果如下：
