Skip to content

Commit f28c565

Browse files
committed
docs: add dynamic attributes to README
1 parent 94c85ee commit f28c565

File tree

1 file changed

+20
-0
lines changed

1 file changed

+20
-0
lines changed

readme.md

+20
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,26 @@ A DOM update or a re-render happens when the state variable is re-assigned:
6666
<!-- the re-assignment of firstName will trigger DOM updates that uses that variable -->
6767
```
6868

69+
## Dynamic Attributes
70+
71+
Besides `:value`, `:class`, and `:text`, you can also use the make **any** attribute dynamic by renaming it from `attribute` to `:attribute`. Values set to dynamic attributes are evaluated as JavaScript:
72+
73+
```html
74+
<script>
75+
pStyle = 'color: red'
76+
</script>
77+
78+
<p :style="pStyle">My style is changing</p>
79+
<button
80+
:click="if (pStyle === 'color: red')
81+
pStyle = 'color: blue';
82+
else
83+
pStyle = 'color: red'"
84+
>
85+
Toggle Style
86+
</button>
87+
```
88+
6989
## Classes
7090

7191
You can make your class names reactive by using the `:class` attribute:

0 commit comments

Comments
 (0)