vue-text · Vue從入門到實戰

## v-text **類型：** string **用法：** 更新元素的 textContent。如果要更新部分的 textContent ，需要使用 {{ Mustache }} 插值。 >[info] 示例： ~~~ <span v-text="msg"></span>  <span>{{msg}}</span> ~~~ >[success] 代碼示例1 ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script> </head> <body> <div id="demo" v-text="'今年是'+year+'年'+month+'月'"></div> <script> new Vue({ el:'#demo', data:{ year:new Date().getFullYear(), month:new Date().getMonth()+1 } }); </script> </body> </html> ~~~ >[success]預覽：https://ityanxi.github.io/Vue-tutorial/chapter04/01v-text1.html -------- >[success] 代碼示例2 ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script> </head> <body> <div id="demo"> 今年是{{year}}年{{month}}月 </div> <script> new Vue({ el:'#demo', data:{ year:new Date().getFullYear(), month:new Date().getMonth()+1 } }); </script> </body> </html> ~~~ >[success]預覽：https://ityanxi.github.io/Vue-tutorial/chapter04/01v-text2.html -------- ## 練習: >[success]預覽：https://ityanxi.github.io/Vue-tutorial/chapter04/01v-text3練習答案.html 請將data中的數據用兩種方式分別渲染到頁面相應的位置，效果如圖： ![](https://box.kancloud.cn/30eb6b81a3e9bc4834aef159727d7311_619x149.png) ~~~ <div id="app"> <h1 v-text></h1> <p>書名：</p> <p>作者：</p> </div> <script type="text/javascript"> var app=new Vue({ el:'#app', data:{ book:{ name:'Vue從入門到實戰', author:'it研習社' } } }); </script> ~~~ >[info]練習代碼示例3 ~~~ <div id="app"> <h1 v-text="'書名是:'+book.name+';作者是:'+book.author"></h1> <p>書名：{{book.name}}</p> <p>作者：{{book.author}}</p> </div> <script type="text/javascript"> var app=new Vue({ el:'#app', data:{ book:{ name:'Vue從入門到實戰', author:'it研習社' } } }); </script> ~~~