1 、插值
1.1 文本
{
{msg}}
1.2 html
使用v-html指令用于输出html代码
1.3 属性
HTML属性中的值应使用v-bind指令
1.4 表达式
Vue提供了完全的JavaScript表达式支持
{
{str.substr(0,6).toUpperCase()}}
{
{ number + 1 }}
{
{ ok ? ‘YES’ : ‘NO’ }}
- 我的Id是js动态生成的
-
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script> <title>插值</title> </head> <body> <div id="app"> <ul> <li> <h3>文本</h3> { {msg}} </li> <li> <!-- v-bind:与v-model的区别 v-model是做数据双向绑定的指令,v-bind只是将对应的值给填写到指定的属性中 --> <h3>v-html指令</h3> <div v-html="vueHtml"></div> </li> <li> <h3>属性</h3> <input type="text" :value="msg" /> </li> <li> <h3>表达式</h3> { {str.substr(0,6).toUpperCase()}} { { number + 1 }} { { ok ? 'YES' : 'NO' }} </li> <li :id="'list-' + id">我的Id是js动态生成的</li> </ul> </div> </body> <script type="text/jscript"> new Vue({ el: "#app", data() { return { msg: 'hello vue', vueHtml:'<span style="color: red;">Vue对Html的解析</span>', str:'http://www.baidu.com', number:6, ok:true, id:5 }; } }); </script> </html>