1. 程式人生 > 實用技巧 >a元件在text元件內不能動態修改樣式,怎麼破?

a元件在text元件內不能動態修改樣式,怎麼破?

問題描述:

a元件放到text元件內部,a元件的style中文字顏色是動態繫結的,修改繫結textcolor的值,無法改變a元件的文字顏色,比如我希望文字顏色能從原始顏色藍色變成紅色。程式碼如下所示:

template中程式碼:

<text>
            <a href="https://huawei.com" style="color: {{textcolor}};" value="click here"></a>
        </text>
         <input type="button" value="修改a的文字顏色" onclick="changeColor" />

script中程式碼:

changeColor: function() {
          this.textcolor="red";
        }

問題分析:

a元件放到text元件內部時,快應用框架不支援動態改變樣式。

解決辦法:

藉助text去實現a的動態效果,直接在text元件上繫結樣式(a元件自身不繫結),可以達到效果,程式碼如下(見紅色部分):



效果圖(點選按鈕後):

欲瞭解更多詳情,請參閱:

快應用開發指導文件:https://developer.huawei.com/consumer/cn/doc/development/quickApp-Guides/quickapp-whitepaper


原文連結:
https://developer.huawei.com/consumer/cn/forum/topic/0204399557167870123?fid=18

作者:AppGallery Connect