Example p303

This example demonstrates that, in addition to the name of a data property, the directive to bind attribute :attr can also evaluate simple JavaScript expression. However, a computed property is more appropriate for more complicated logic. A computed property is similar to a read-only data property, and its value is usually calculated from the data properties.

The style attribute of HTML elements allows you to use CSS style rules to change the appearance of the elements. In Vue, you can bind a JavaScript object (group of property names and values) to the style attribute. Vue will handle the difference in naming convention in JavaScript (camelCase) and CSS (kebab-case).

There is also a special handling in binding the class attribute. See online reference for more information.

Temperature: {{ temperature }}°C

Rain: {{ rain }}%

Try the following

• Set vm.temperature to 10 and 20. Check the source code to find out how the image changes for different temperature.
• Check the value of vm.styleTemperature. It's a JavaScript object! Notice that the property names of this object use camelCase, not kebab-case (which is the naming convention in CSS).
• Change the style of the temperature text. e.g. vm.styleTemperature.color = 'red', vm.styleTemperature = { fontSize:'150%', backgroundColor:'white', color:'red'}.
• Set vm.rain to 20, 40 and 80. Read the source code of the computed property styleRain that changes the appearance of the rain percentage.
• Also read the source code of the computed property rainImageURL.