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