<div id="app"> <p v-text="username"></p> <p v-text="gender">性别</p> <p>姓名：{{username}}</p> <p>性别：{{gender}}</p> <p v-html="desc"></p> </div>
v-text 按文本赋值，会覆盖控件原本的值
<p v-text="username"></p> <p v-text="gender">性别</p>
<p>zs</p> <p>男</p>
{{ }} 按文本赋值
<p>姓名：{{username}}</p> <p>性别：{{gender}}</p>
<p>姓名：zs</p> <p>性别：男</p>
v-html 按 html 格式赋值
<p v-html="desc"></p>
<p><i>abc</i></p>
v-bind 绑定属性的值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <input type="text" v-bind:placeholder="inputValue" /> <hr> <img v-bind:src="imgSrc"> <br /><br /> <input type="text" :placeholder="inputValue" /> <hr> <img :src="imgSrc"> </div> <script src="./lib/vue-2.6.12.js"></script> <script> const vm = new Vue({ el:'#app', data:{ inputValue: '请输入内容', imgSrc: './images/logo.png' } }) </script> </body> </html>
{{ }} 里可以执行一些运算操作：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <p>{{ number + 2 }}</p> <p>{{ ok ? "True" : 'False' }}</p> <p>{{ message }} {{ message.split('').reverse().join('') }}</p> <p :id="'list' + id">xxx</p> <p>{{ user.name }}</p> </div> <script src="./lib/vue-2.6.12.js"></script> <script> const vm = new Vue({ el:'#app', data:{ number: 9, ok: false, message: 'ABC', id: 3, user:{ name: 'zs' } } }) </script> </body> </html>