日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔！

生活随笔

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

vue

2019.11.6早上vue听写

發布時間：2024/5/8 vue 73 豆豆
生活随笔 收集整理的這篇文章主要介紹了 2019.11.6早上vue听写 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

2019.11.6早上vue聽寫

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

聽寫內容

1.手寫一個vue頁面，將data中的msg顯示在頁面中，用插值表達式和v-text和v-html三種方式。
2.v-for可以遍歷那些值？遍歷它們的語法分別是什么？
3.強變量類型和弱變量類型語言的差異性是什么？
4.將M中數據設置給標簽的class屬性的方式有幾種？請分別寫出一個案例。
5.將M中數據設置給標簽的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語法可以遍歷數組，普通數字和對象（一個參數必是值，兩個參數必是值和鍵，三個參數必是值和鍵和下標）
數組：v-for=“value in arr”
v-for=” (value, index) in arr”
數字：v-for=“i in n”
對象：v-for=” value in obj (value, key) in obj”
v-for="(value, key, index) in obj”

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

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

聽寫4：將M中數據設置給標簽的class屬性的方式和案例

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

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>/*通過類的組合實現復合樣式*/.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、單個值設置給標簽*/c1: 'cred',/*方式2、對象式設置*/cObj: {cred: true,w100: true,byellow: true},/*方式3、簡單數組設置*/cSimpleArray: ['cred', 'w100', 'byellow'],/*方式4、對象數組設置*/cObjArray: [{cred: true}, {byellow: false}, 'w100'],democ: obj,},methods: {}}); </script> </body> </html>

聽寫5：將M中數據設置給標簽的style屬性的方式和案例

方式1、將對象屬性對應的樣式值設置給標簽
方式2、將數組中對象中css樣式設置給標簽

<!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、將對象屬性對應的樣式值設置給標簽styleObj: {'color': 'red','font-size': '60px',},// 方式2、將數組中對象中css樣式設置給標簽styleObjArray: [{'color': 'red'},{'font-size': '60px'}]},methods: {}}); </script> </body> </html>

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。