亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

用vue寫手機端網頁代碼怎么優化?

用vue寫手機端網頁代碼怎么優化?

一只名叫tom的貓 2019-03-11 16:15:20
想嘗試用vue寫個網站,但是代碼寫的很low,很像h5,求大神指教怎么寫,怎么優化。這是我的代碼<template>  <div class="head">      <div class="logo">        <img src="@/assets/logo.png" alt="">      </div>      <div class="menu">        <img src="@/assets/menu.png" alt="">      </div>  </div></template><script>export default {  name: 'Header',  data () {    return {      msg: '你好'    }  }}</script><!-- Add "scoped" attribute to limit CSS to this component only --><style scoped>.head{  width: 100%;  height: 1.5rem;  background-color:antiquewhite;  position:relative;}.logo{  width: 4rem;  height: 1.1rem;  background-color: aquamarine;  position: absolute;  top:.2rem;  left: .2rem;}.logo img{  width: 100%;  height: 100%;}.menu{  width: 1rem;  height: 1.1rem;  background-color: azure;  position: absolute;  top: .2rem;  right: .2rem;}.menu img{  width: 100%;}</style>
查看完整描述

1 回答

?
幕布斯7119047

TA貢獻1794條經驗 獲得超8個贊

  <div class="logo">

    <img :src="logo" alt="">

  </div>

  <div class="menu" v-on:click="isShow=!isShow">

    <img :src="menu" alt="">

  </div>

  <ul v-show="isShow">

    <li>首頁</li>

    <li>服務項目</li>

    <li>公司案例</li>

    <li>新聞動態</li>

    <li>關于我們</li>

  </ul>

</div>


</template>


<script>

export default {

name: 'Header',

data () {


return {

  msg: '你好',

  isShow:false,

  logo:require("@/assets/logo.png"),

  menu:require("@/assets/menu.png")

}

},

這樣寫比之前簡單了很多


查看完整回答
反對 回復 2019-03-20
  • 1 回答
  • 0 關注
  • 730 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號