19-内置指令

发布时间 2023-09-25 18:00:41作者: 马铃薯1

目前为止,我们学过的指令:

v-bind:单向绑定解析表达式,可以简写为  :xxx

v-model:双向数据绑定

v-for:遍历数组 / 对象 / 字符串

v-on:绑定事件监听,可以简写为 @

v-if:条件渲染(动态控制节点是否存在)

v-else:条件渲染(动态控制节点是否存在)

v-show:条件渲染(动态控制节点是否展示)

 

v-text指令

作用:向其所在的节点中渲染文本内容

与插值语法的区别:v-text 会替换掉节点中的内容,{{xxx}} 则不会,更加灵活

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>v-text指令</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!--准备好一个容器-->
        <div id="root">
            <div>{{name}}</div>
            <div v-text="name"></div>
        </div>
        <script type="text/javascript">
            // 阻止 vue 在启动时生成生产提示
            Vue.config.productionTip = false

            new Vue({
                el:"#root",
                data(){
                    return{
                        name:"马铃薯",
                    }
                }
            })
        </script>
    </body>
</html>