×ðÁú¿­Ê±¹ÙÍøµÇ¼

vue»æÖưٷֱȽø¶ÈÌõ

ÔÚ vue.js ÖлæÖưٷֱȽø¶ÈÌõ¿ÉÒÔʹÓà v-bind Ö¸ÁîºÍÄÚÁªÑùʽ£º½¨Éè½ø¶ÈÌõÈÝÆ÷½ç˵¿í¶ÈÊý¾ÝʹÓà v-bind °ó¶¨¿í¶ÈÓ¦ÓÃÄÚÁªÑùʽ

vue»æÖưٷֱȽø¶ÈÌõ

ʹÓà Vue.js »æÖưٷֱȽø¶ÈÌõ

ÔÚ Vue.js ÖлæÖưٷֱȽø¶ÈÌõÊÇÒ»ÖÖ³£¼ûʹÃü¡£ÓжàÖÖÒªÁì¿ÉÒÔʵÏÖÕâһĿµÄ£¬µ«Ê¹Óà v-bind Ö¸ÁîºÍÄÚÁªÑùʽÊÇÆäÖÐ×î¼òÆÓµÄÒªÁì¡£

°ì·¨ 1£º½¨Éè½ø¶ÈÌõÈÝÆ÷

<div class="progress-container">
  <div class="progress-bar" :style="{ width: width + '%' }"></div>
</div>

µÇ¼ºó¸´ÖÆ µÇ¼ºó¸´ÖÆ

°ì·¨ 2£º½ç˵ width Êý¾Ý

Á¬Ã¦Ñ§Ï°¡°Ç°¶ËÃâ·ÑѧϰÌõ¼Ç£¨ÉîÈ룩¡± £»

const app = new Vue({
  data: {
    width: 50, // ³õʼ½ø¶ÈÌõ¿í¶È
  },
});

µÇ¼ºó¸´ÖÆ µÇ¼ºó¸´ÖÆ

°ì·¨ 3£ºÊ¹Óà v-bind °ó¶¨ width

<div class="progress-bar" :style="{ width: width + '%' }"></div>

µÇ¼ºó¸´ÖÆ µÇ¼ºó¸´ÖÆ

v-bind Ö¸ÁîÔÊÐíÎÒÃǶ¯Ì¬°ó¶¨ Vue Êý¾Ýµ½ HTML ÔªËØ¡£ÔÚ´ËʾÀýÖУ¬ÎÒÃÇÉèÖà width ÑùʽÊôÐÔ¼´ÊÇ width Êý¾Ý¼ÓÉϰٷֱȷûºÅ¡£

°ì·¨ 4£ºÓ¦ÓÃÄÚÁªÑùʽ

<div class="progress-bar" :style="{ width: width + '%' }"></div>

µÇ¼ºó¸´ÖÆ µÇ¼ºó¸´ÖÆ

ÄÚÁªÑùʽֱ½ÓÓ¦ÓÃÓÚ HTML ÔªËØ¡£ÔÚ´ËʾÀýÖУ¬ÎÒÃÇÉèÖà width ÑùʽÊôÐÔ¼´ÊÇ width Êý¾Ý¼ÓÉϰٷֱȷûºÅ¡£Õ⽫ƾ֤ width Êý¾Ýµ÷½â½ø¶ÈÌõµÄ¿í¶È¡£

ʾÀý£º

½«ÒÔÏ´úÂëÌí¼Óµ½ Vue Ó¦ÓóÌÐòÖУº

<div class="progress-container">
  <div class="progress-bar" :style="{ width: width + '%' }"></div>
</div>

µÇ¼ºó¸´ÖÆ µÇ¼ºó¸´ÖÆ

const app = new Vue({
  data: {
    width: 50, // ³õʼ½ø¶ÈÌõ¿í¶È
  },
});

µÇ¼ºó¸´ÖÆ µÇ¼ºó¸´ÖÆ

Õ⽫½¨ÉèÒ»¸ö½ø¶ÈÌõ£¬Æä¿í¶È×î³õΪ 50%¡£È»ºó£¬Äú¿ÉÒÔͨ¹ý¸ü¸Ä width Êý¾ÝÀ´¶¯Ì¬µ÷½â½ø¶ÈÌõµÄ¿í¶È¡£

ÒÔÉϾÍÊÇvue»æÖưٷֱȽø¶ÈÌõµÄÏêϸÄÚÈÝ£¬¸ü¶àÇë¹Ø×¢±¾ÍøÄÚÆäËüÏà¹ØÎÄÕ£¡

ÃâÔð˵Ã÷£ºÒÔÉÏչʾÄÚÈÝȪԴÓÚÏàÖúýÌå¡¢ÆóÒµ»ú¹¹¡¢ÍøÓÑÌṩ»òÍøÂçÍøÂçÕûÀí£¬°æȨÕùÒéÓë±¾Õ¾Î޹أ¬ÎÄÕÂÉæ¼°¿´·¨Óë¿´·¨²»´ú±í×ðÁú¿­Ê±¹ÙÍøµÇ¼ÂËÓÍ»úÍø¹Ù·½Ì¬¶È£¬Çë¶ÁÕß½ö×ö²Î¿¼¡£±¾ÎĽӴýתÔØ£¬×ªÔØÇë˵Ã÷À´ÓÉ¡£ÈôÄúÒÔΪ±¾ÎÄÇÖÕ¼ÁËÄúµÄ°æȨÐÅÏ¢£¬»òÄú·¢Ã÷¸ÃÄÚÈÝÓÐÈκÎÉæ¼°ÓÐÎ¥¹«µÂ¡¢Ã°·¸Ö´·¨µÈÎ¥·¨ÐÅÏ¢£¬ÇëÄúÁ¬Ã¦ÁªÏµ×ðÁú¿­Ê±¹ÙÍøµÇ¼ʵʱÐÞÕý»òɾ³ý¡£

Ïà¹ØÐÂÎÅ

ÁªÏµ×ðÁú¿­Ê±¹ÙÍøµÇ¼

18523999891

¿É΢ÐÅÔÚÏß×Éѯ

ÊÂÇéʱ¼ä£ºÖÜÒ»ÖÁÖÜÎ壬9:30-18:30£¬½ÚãåÈÕÐÝÏ¢

QR code
ÍøÕ¾µØͼ