QWeb template can set attribute values dynamically. This can be done in the following three ways.
The first way is through t-att-$attr_name. At the time of template rendering, an attribute, $attr_name, is created; its value can be any valid Python expression. This is computed with the current context and the result is set as the value of the attribute, like this:
<div t-att-total="10 + 5 + 5"/>
It will be rendered like this:
<div total="20"></div>
The second way is through t-attf-$attr_name. This is the same as the previous option. The only difference is that only strings between {{ ..}} and #{..} are evaluated. This is helpful when values are mixed with the strings. It is mostly used to evaluate classes, like in this example:
<t t-foreach="['info', 'danger', 'warning']" t-as="color">
<div t-attf-class="alert alert-#{color}">
Simple bootstrap alert
</div>
</t>
It will be rendered like this:
<div class="alert alert-info">
Simple bootstrap alert
</div>
<div class="alert alert-danger">
Simple bootstrap alert
</div>
<div class="alert alert-warning">
Simple bootstrap alert
</div>
The third way is through the t-att=mapping option. This option accepts the dictionary after the template rendering the dictionary's data is converted into attributes and values. Take a look at the following example:
<div t-att="{'id': 'my_el_id', 'class': 'alert alert-danger'}"/>After rendering this template, it will be converted into the following:
<div id="my_el_id" class="alert alert-danger"/>In our example, we have used t-attf-class to get a dynamic background based on index values.