·用于给、及<select>元素设置双向数据绑定。</p> <p>·首先我们来体验一下双向数据绑定的效果。</p> <font style="color:#808080;"><!</font><font style="color:#569cd6;">DOCTYPE</font><font style="color:#d4d4d4;"> </font><font style="color:#9cdcfe;">html</font><font style="color:#808080;">></font> <font style="color:#808080;"><</font><font style="color:#569cd6;">html</font><font style="color:#d4d4d4;"> </font><font style="color:#9cdcfe;">lang</font><font style="color:#d4d4d4;">=</font><font style="color:#ce9178;">“en”</font><font style="color:#808080;">></font> <font style="color:#808080;"><</font><font style="color:#569cd6;">head</font><font style="color:#808080;">></font> <font style="color:#d4d4d4;"> </font><font style="color:#808080;"><</font><font style="color:#569cd6;">meta</font><font style="color:#d4d4d4;"> </font><font style="color:#9cdcfe;">charset</font><font style="color:#d4d4d4;">=</font><font style="color:#ce9178;">“UTF-8”</font><font style="color:#808080;">></font> <font style="color:#d4d4d4;"> </font><font style="color:#808080;"><</font><font style="color:#569cd6;">meta</font><font style="color:#d4d4d4;"> </font><font style="color:#9cdcfe;">name</font><font style="color:#d4d4d4;">=</font><font style="color:#ce9178;">“viewport”</font><font style="color:#d4d4d4;"> </font><font style="color:#9cdcfe;">content</font><font style="color:#d4d4d4;">=</font><font style="color:#ce9178;">“width=device-width, initial-scale=1.0”</font><font style="color:#808080;">></font> <font style="color:#d4d4d4;"> </font><font style="color:#808080;"><</font><font style="color:#569cd6;">title</font><font style="color:#808080;">></font><font style="color:#d4d4d4;">Document</font><font style="color:#808080;"></</font><font style="color:#569cd6;">title</font><font style="color:#808080;">></font> <font style="color:#808080;"></</font><font style="color:#569cd6;">head</font><font style="color:#808080;">></font> <font style="color:#808080;"><</font><font style="color:#569cd6;">body</font><font style="color:#808080;">></font> <font style="color:#d4d4d4;"> </font><font style="color:#808080;"><</font><font style="color:#569cd6;">div</font><font style="color:#d4d4d4;"> </font><font style="color:#9cdcfe;">id</font><font style="color:#d4d4d4;">=</font><font style="color:#ce9178;">“app”</font><font style="color:#808080;">></font> <font style="color:#d4d4d4;"> </font><font style="color:#808080;"><</font><font style="color:#569cd6;">p</font><font style="color:#808080;">></font><font style="color:#d4d4d4;">元素内容为：{{ value }}</font><font style="color:#808080;"></</font><font style="color:#569cd6;">p</font><font style="color:#808080;">></font> <font style="color:#d4d4d4;"> </font><font style="color:#808080;"><</font><font style="color:#569cd6;">input</font><font style="color:#d4d4d4;"> </font><font style="color:#9cdcfe;">type</font><font style="color:#d4d4d4;">=</font><font style="color:#ce9178;">“text”</font><font style="color:#d4d4d4;"> </font><font style="color:#9cdcfe;">v-model</font><font style="color:#d4d4d4;">=</font><font style="color:#ce9178;">“value”</font><font style="color:#808080;">></font> <font style="color:#d4d4d4;"> </font><font style="color:#808080;"></</font><font style="color:#569cd6;">div</font><font style="color:#808080;">></font> <font style="color:#d4d4d4;"> </font><font style="color:#808080;"><</font><font style="color:#569cd6;">script</font><font style="color:#d4d4d4;"> </font><font style="color:#9cdcfe;">src</font><font style="color:#d4d4d4;">=</font><font style="color:#ce9178;">“lib/vue.js”</font><font style="color:#808080;">></</font><font style="color:#569cd6;">script</font><font style="color:#808080;">></font> <font style="color:#d4d4d4;"> </font><font style="color:#808080;"><</font><font style="color:#569cd6;">script</font><font style="color:#808080;">></font> <font style="color:#d4d4d4;"> </font><font style="color:#569cd6;">var</font><font style="color:#d4d4d4;"> </font><font style="color:#9cdcfe;">vm</font><font style="color:#d4d4d4;"> = </font><font style="color:#569cd6;">new</font><font style="color:#d4d4d4;"> </font><font style="color:#dcdcaa;">Vue</font><font style="color:#d4d4d4;">({</font> <font style="color:#d4d4d4;"> </font><font style="color:#9cdcfe;">el:</font><font style="color:#d4d4d4;"> </font><font style="color:#ce9178;">‘#app’</font><font style="color:#d4d4d4;">,</font> <font style="color:#d4d4d4;"> </font><font style="color:#9cdcfe;">data:</font><font style="color:#d4d4d4;"> {</font> <font style="color:#d4d4d4;"> </font><font style="color:#9cdcfe;">value:</font><font style="color:#d4d4d4;"> </font><font style="color:#ce9178;">‘’</font> <font style="color:#d4d4d4;"> }</font> <font style="color:#d4d4d4;"> });</font> <font style="color:#d4d4d4;"> </font><font style="color:#808080;"></</font><font style="color:#569cd6;">script</font><font style="color:#808080;">></font> <font style="color:#808080;"></</font><font style="color:#569cd6;">body</font><font style="color:#808080;">></font> <font style="color:#808080;"></</font><font style="color:#569cd6;">html</font><font style="color:#808080;">></font>
