欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vant框架van-cell插槽無法換行問題及解決

 更新時間:2023年01月18日 10:49:58   作者:祈蹊  
這篇文章主要介紹了vant框架van-cell插槽無法換行問題及解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教

vant框架van-cell插槽無法換行

解決方法

在插槽中定義div的屬性display為block;再在里面定義一個塊級標簽就行了。

<template>
<div>
    <van-cell-group v-for="item in list" :key="item.index">
         <van-list v-bind="item" >
              <div style="width: 100%;">
                  <van-cell :title="item.name">
                   <template slot="label">
                      <span>{{item.sex}}</span>
                      <div style="display:block;">
                        <span style="display:block;">{{item.age}}</span>
                      </div>
                    </template>
                  </van-cell>
             </div>
          </van-list>
    </van-cell-group>
    </div>
</template>

<script>
export default {
     data() {
      return {
          list:[
              {
                  name:"張三",
                  sex:"男",
                  age:15
              },
              {
                  name:"李四",
                  sex:"男",
                  age:16
              }
          ]
      }
     }
}
</script>

<style>
</style>

效果如下:

小程序 van-cell 換行能左對齊問題

 van-cell 的value 屬性 默認是右對齊,這時候我們只想顯示信息的時候就可以運用父元素用右對齊,子元素用行內(nèi)塊元素,然后左對齊

/* 解決多行能出現(xiàn)向左對齊的情況 */
.van-cell__value>text{
    display: inline-block;
    text-align: left;
    word-break: break-all; //換行能顯示全部字符
}
  <van-cell title="活動標題" title-width="7em">
          <text>{{mainData.title}}</text>
        </van-cell>

總結

以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。

相關文章

  • 在vue+element-plus中無法同時使用v-for和v-if的問題及解決方法

    在vue+element-plus中無法同時使用v-for和v-if的問題及解決方法

    由于路由中存在不需要遍歷的數(shù)據(jù)所以像用v-if來過濾,但是報錯,百度說vue不能同時使用v-if和v-for,今天小編給大家分享解決方式,感興趣的朋友跟隨小編一起看看吧
    2023-07-07
  • Vue實現(xiàn)input寬度隨文字長度自適應操作

    Vue實現(xiàn)input寬度隨文字長度自適應操作

    這篇文章主要介紹了Vue實現(xiàn)input寬度隨文字長度自適應操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-07-07
  • Vue.js中computed的基本使用方法

    Vue.js中computed的基本使用方法

    Vue.js中,computed屬性根據(jù)依賴進行緩存,只有依賴改變時才重新計算,這樣有效提高性能,computed屬性是響應式的,可以自動更新,并且默認是只讀的,它與methods的主要區(qū)別在于計算屬性具有緩存性,而方法每次調(diào)用都會執(zhí)行,使用computed可以使模板更加簡潔,提高應用性能
    2024-09-09
  • vue.js獲取數(shù)據(jù)庫數(shù)據(jù)實例代碼

    vue.js獲取數(shù)據(jù)庫數(shù)據(jù)實例代碼

    本篇文章主要介紹了vue.js獲取數(shù)據(jù)庫數(shù)據(jù)實例代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-05-05
  • 基于Vuejs和Element的注冊插件的編寫方法

    基于Vuejs和Element的注冊插件的編寫方法

    這篇文章主要介紹了基于Vuejs和Element的注冊插件的編寫方法,需要的朋友可以參考下
    2017-07-07
  • Vue.js如何實現(xiàn)路由懶加載淺析

    Vue.js如何實現(xiàn)路由懶加載淺析

    Vue是可以自定義指令的,最近學習過程中遇見了一個需要懶加載的功能,發(fā)現(xiàn)網(wǎng)上這方面的資料較少,所以下面這篇文章主要給大家介紹了關于Vue.js如何實現(xiàn)路由懶加載的相關資料,需要的朋友可以參考借鑒,下面來一起看看吧。
    2017-08-08
  • vue圖片加載與顯示默認圖片實例代碼

    vue圖片加載與顯示默認圖片實例代碼

    這篇文章主要為大家詳細介紹了vue圖片加載與顯示默認圖片的實例代碼,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-03-03
  • Vue2.X和Vue3.0數(shù)據(jù)響應原理變化的區(qū)別

    Vue2.X和Vue3.0數(shù)據(jù)響應原理變化的區(qū)別

    這篇文章主要介紹了Vue2.X和Vue3.0數(shù)據(jù)響應原理變化的區(qū)別,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2019-11-11
  • Element-ui的table中使用fixed后出現(xiàn)行混亂情況的解決

    Element-ui的table中使用fixed后出現(xiàn)行混亂情況的解決

    這篇文章主要介紹了Element-ui的table中使用fixed后出現(xiàn)行混亂情況的解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • vue-router使用next()跳轉(zhuǎn)到指定路徑時會無限循環(huán)問題

    vue-router使用next()跳轉(zhuǎn)到指定路徑時會無限循環(huán)問題

    這篇文章主要介紹了vue-router使用next()跳轉(zhuǎn)到指定路徑時會無限循環(huán)問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-11-11

最新評論