v-text指令用来更新元素的文本内容。如果只需要更新部分文本内容,则使用插值来完成。
【例4.5】v-text指令(源代码\ch04\4.5.html)。
<div id="app"> <!--更新全部内容--> <p v-text="message">采购的商品是:</p> <!--更新部分内容--> <p>采购的商品是:{{message}}</p> </div> <!--引入vue文件--> <script src="https://unpkg.com/vue@next"></script> <script> //创建一个应用程序实例 const vm= Vue.createApp({ //该函数返回数据对象 data(){ return{ message: '电视机、洗衣机和空调' } } //在指定的DOM元素上装载应用程序实例的根组件 }).mount('#app'); </script>
在谷歌浏览器中运行程序,结果如图4-8所示。
图4-8 v-text指令