當前位置：首頁 > 前端技术 > vue >内容正文

vue

2019.11.6早上vue听写

發(fā)布時間：2024/5/8 vue 93 豆豆

生活随笔收集整理的這篇文章主要介紹了 2019.11.6早上vue听写小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

2019.11.6早上vue聽寫

聽寫內(nèi)容
- 聽寫1：寫一個vue頁面，顯示data中的msg（插值表達式和v-text和v-html三種方式）
- 聽寫2：v-for可以遍歷的值及語法
- 聽寫3：強變量類型和弱變量類型語言的差異性
- 聽寫4：將M中數(shù)據(jù)設(shè)置給標簽的class屬性的方式和案例
- 聽寫5：將M中數(shù)據(jù)設(shè)置給標簽的style屬性的方式和案例

聽寫內(nèi)容

1.手寫一個vue頁面，將data中的msg顯示在頁面中，用插值表達式和v-text和v-html三種方式。
2.v-for可以遍歷那些值？遍歷它們的語法分別是什么？
3.強變量類型和弱變量類型語言的差異性是什么？
4.將M中數(shù)據(jù)設(shè)置給標簽的class屬性的方式有幾種？請分別寫出一個案例。
5.將M中數(shù)據(jù)設(shè)置給標簽的style屬性的方式有幾種？請分別寫出一個案例。

聽寫1：寫一個vue頁面，顯示data中的msg（插值表達式和v-text和v-html三種方式）

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><script src="js/vue.js"></script></head><body><div id="app"><p>姓名：{{msg}}</p><p v-text="msg">a</p><p v-html="msg">b</p></div><script>var vm = new Vue({el: "#app",data: {msg: "張三"}});</script></body> </html>

聽寫2：v-for可以遍歷的值及語法

v-for語法可以遍歷數(shù)組，普通數(shù)字和對象（一個參數(shù)必是值，兩個參數(shù)必是值和鍵，三個參數(shù)必是值和鍵和下標）
數(shù)組：v-for=“value in arr”
v-for=” (value, index) in arr”
數(shù)字：v-for=“i in n”
對象：v-for=” value in obj (value, key) in obj”
v-for="(value, key, index) in obj”

聽寫3：強變量類型和弱變量類型語言的差異性

弱變量類型語言的數(shù)據(jù)類型可以被忽略，一個變量可以賦不同數(shù)據(jù)類型的值；
強變量類型一旦一個變量被指定了某個數(shù)據(jù)類型，如果不經(jīng)過強制轉(zhuǎn)換，那么它就永遠是這個數(shù)據(jù)類型了

聽寫4：將M中數(shù)據(jù)設(shè)置給標簽的class屬性的方式和案例

方式1、單個值設(shè)置給標簽
方式2、對象式設(shè)置
方式3、簡單數(shù)組設(shè)置
方式4、對象數(shù)組設(shè)置

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>/*通過類的組合實現(xiàn)復(fù)合樣式*/.cred {color: red;}.w100 {width: 100px;}.byellow {background-color: yellow;}</style> </head> <body> <div id="app"><div :class="c1">c1測試</div><div :class="cObj">cObj測試</div><div :class="cSimpleArray">cSimpleArray測試</div><div :class="cObjArray">cObjArray測試</div><div :class="democ">democ測試</div> </div> <script src="js/vue.js"></script> <script>var obj = [{a1: false,a2: true,a3: false,a4: true,},{a1: true,a3: true,},'a5']var vm = new Vue({el: '#app',data: {/*方式1、單個值設(shè)置給標簽*/c1: 'cred',/*方式2、對象式設(shè)置*/cObj: {cred: true,w100: true,byellow: true},/*方式3、簡單數(shù)組設(shè)置*/cSimpleArray: ['cred', 'w100', 'byellow'],/*方式4、對象數(shù)組設(shè)置*/cObjArray: [{cred: true}, {byellow: false}, 'w100'],democ: obj,},methods: {}}); </script> </body> </html>

聽寫5：將M中數(shù)據(jù)設(shè)置給標簽的style屬性的方式和案例

方式1、將對象屬性對應(yīng)的樣式值設(shè)置給標簽
方式2、將數(shù)組中對象中css樣式設(shè)置給標簽

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <div id="app"><p :style="styleObj">打字</p> </div> <script src="js/vue.js"></script> <script>var vm = new Vue({el: '#app',data: {// 方式1、將對象屬性對應(yīng)的樣式值設(shè)置給標簽styleObj: {'color': 'red','font-size': '60px',},// 方式2、將數(shù)組中對象中css樣式設(shè)置給標簽styleObjArray: [{'color': 'red'},{'font-size': '60px'}]},methods: {}}); </script> </body> </html>

總結(jié)

以上是生活随笔為你收集整理的2019.11.6早上vue听写的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

Vue
早上