生活随笔
收集整理的這篇文章主要介紹了
vue初级尝试
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
為了跟上前端后臺化的潮流，本少不得不開始關注vue，下列上機代碼是針對App.vue進行的更改
<template><div id="app"><img><h1>{{msg}}</h1><br><br><ul>{{mycoach.name}}</ul><ul>芳齡:{{mycoach.age}}</ul><ul>擅長武技:</ul><ul v-for="item in mycoach.expertin"><li>{{item}}</li></ul><br><br><br><ul span="margin-left:200px">歌詞:別來糾纏我</ul><ul v-for="item in chrouslist"><li>{{item}}</li></ul></div>
</template><script>
export default {data(){return {msg:'歡迎來到帥哥vue',mycoach:{name:'陳培昌',age:22,expertin:['散打','泰拳']},chrouslist:['我不想對你再說些什么','現在是氣憤的我','你是被你的虛偽完全淹沒','變成討厭的顏色','......']}}}
</script> 輸出結果：
附錄：頁面css樣式
<style>
#app {font-family: 'Avenir', Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style> <template><div id="app"><img><div><h1>{{msg}}</h1><br></div><div><ul>{{jinerdidi.name}}</ul><ul>芳齡:{{jinerdidi.starinfo.age}}</ul><ul>業余愛好:</ul><ul v-for="item in jinerdidi.starinfo.favortie"><li>{{item}}</li></ul><ul>擅長武技:</ul><ul v-for="item in jinerdidi.starinfo.expertin"><li v-for="wenwa in item.stand"><ol>{{wenwa}}</ol></li><li v-for="wenwa in item.ground"><ol>{{wenwa}}</ol></li></ul></div></div></template><script>
export default {data(){return {jinerdidi:{name:'程勁',starinfo:{age:20,favortie:['品鑒河南燴面','和丁大哥一起廝混'],expertin:[{'stand':['散打','泰拳']},{'ground':['巴西柔術','MMA']}]},}}}}
</script><style>
#app {}ul{list-style-type: none;}
</style> ?
轉載于:https://www.cnblogs.com/saintdingspage/p/11412150.html
總結
以上是生活随笔為你收集整理的vue初级尝试的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
