Vue内置指令vue-text介绍

v-text

类型： string
用法：更新元素的 textContent。如果要更新部分的 textContent ，需要使用 {{ Mustache }} 插值。

示例：

<span v-text="msg"></span><!-- 和下面的一样 --><span>{{msg}}</span>

代码示例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>

预览：https://ityanxi.github.io/Vue-tutorial/chapter04/01v-text1.html

代码示例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>

预览：https://ityanxi.github.io/Vue-tutorial/chapter04/01v-text2.html

练习:

预览：https://ityanxi.github.io/Vue-tutorial/chapter04/01v-text3练习答案.html

请将data中的数据用两种方式分别渲染到页面相应的位置，效果如图：

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

练习代码示例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>