购买
下载掌阅APP,畅读海量书库
立即打开
畅读海量书库
扫码下载掌阅APP

4.1.5 v-text

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指令 WODvJMiTc9IXyx6ggqYgY0J++X0pS7hJAx6alJwQyeUOL4pIO4IpyaVe8AxlxnSK

点击中间区域
呼出菜单
上一章
目录
下一章
×