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> ~~~