前端VUE3.0,DAY23，v-text指令

最新推荐文章于 2024-03-24 16:46:14 发布

疯子的梦想＠

最新推荐文章于 2024-03-24 16:46:14 发布

阅读量256

点赞数

分类专栏：前端文章标签： javascript html

本文链接：https://blog.csdn.net/weixin_48681463/article/details/120019331

版权

前端专栏收录该内容

110 篇文章 4 订阅

订阅专栏

VUE3.0,DAY23

部分指令回顾

V- bind
:单向绑定解析表达式，可简写为:xXXx
v-model :双向数据绑定
v-for
:遍历数组/对象/字符串
v-on
:绑定事件监听，可简写为@
v-if
条件渲染(动态控制节点是否存存在)
v-else
条件渲染(动态控制节点是否存存在)
V- show
条件渲染(动态控制节点是否展示)

v-text功能

向指定的标签插入文本。

v-text如何实现

注意：v-text会替换标签内的所有内容，所以不如插值法灵活。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-text指令</title>
    <!--引入vue-->
    <script type="text/javascript" src="../vue.js">
        Vue.config.productionTip = false
    </script>
    <!--上边的vue.config选项关闭了启动时生成生产提示-->
</head>

<body>
    <!--准备好一个容器-->
    <div id="root">
        <div v-text="name"></div>
    </div>

    <!--下边的vue.config选项关闭了启动时生成生产提示-->
    <script type="text/javascript">
        Vue.config.productionTip = false
        new Vue({
            el: '#root',
            data() {
                return {
                    name: '哈哈',

                }
            },
        })

    </script>
</body>

</html>

在这里插入图片描述

疯子的梦想＠

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端VUE3.0,DAY23，v-text指令

VUE3.0,DAY23部分指令回顾v-text功能v-text如何实现部分指令回顾V- bind:单向绑定解析表达式，可简写为:xXXxv-model :双向数据绑定v-for:遍历数组/对象/字符串v-on:绑定事件监听，可简写为@v-if条件渲染(动态控制节点是否存存在)v-else条件渲染(动态控制节点是否存存在)V- show条件渲染(动态控制节点是否展示)v-text功能向指定的标签插入文本。v-text如何实现注意：v-text会替换标签内的所有内容，所以不
复制链接

扫一扫

专栏目录