![深度探索Vue.js:原理剖析与实战应用](https://wfqqreader-1252317822.image.myqcloud.com/cover/137/52843137/b_52843137.jpg)
上QQ阅读APP看书,第一时间看更新
2.4.2 v-text指令介绍
v-text指令为Vue定义的取值指令,可以将在data选项中定义的属性输出到指定的标签,与v-html不同的是它会将属性的值完全以字符串的形式输出到网页,不会执行任何解析代码的操作。v-text必须在双标签上使用,操作方式与v-html相同,v-text的效果与{{}}表达式效果相同,但是使用方式没有其灵活,所以v-text的使用场景相对较少。
![](https://epubservercos.yuewen.com/EAE1DD/31397881207142106/epubprivate/OEBPS/Images/Figure-P28_1097.jpg?sign=1739143768-nRkvJ6tRdz3hp9LFN4GBF8Ar9HC0sjuo-0-3951375992b2b1e3d8fc6bbcdd5a8366)
图2-2 v-html指令案例
接下来学习如何在Vue中使用v-text指令,代码如下:
![](https://epubservercos.yuewen.com/EAE1DD/31397881207142106/epubprivate/OEBPS/Images/Figure-P28_1105.jpg?sign=1739143768-bvZXZBSG0eC3S0R8lS8T5D0yfIcpmK9J-0-0bb563f39591a958589b06b1f8e1e033)
运行结果如图2-3所示。
![](https://epubservercos.yuewen.com/EAE1DD/31397881207142106/epubprivate/OEBPS/Images/Figure-P29_1118.jpg?sign=1739143768-XIFyDSSHI34FxmW1s7XQM1ArMKynONau-0-0f1307dea913c61767a45c13e576fb8d)
图2-3 v-text指令案例