vue中的v-text，v-html，v-on属性

最新推荐文章于 2024-04-18 20:42:10 发布

我是Dreamer啊

最新推荐文章于 2024-04-18 20:42:10 发布

阅读量1.1k

点赞数 1

分类专栏：前端开发文章标签： vue js html javascript

BY Dreamer同学

本文链接：https://blog.csdn.net/weixin_42579348/article/details/113484152

版权

前端开发专栏收录该内容

57 篇文章 6 订阅

订阅专栏

v-text

设置标签的文本值(textContent)，无论内容是什么，只会解析成为文本。

在这里插入图片描述

v-text是将数据设置给标签的文本属性，替换文本属性中原来的值，例如上图，通过程序的运行可以看出，高先生替换掉了第一个h2文本属性中的陕西这个值。在v-text属性中也可以使用字符串的拼接，例如：
在这里插入图片描述

v-html

v-html改变innerHTML值，内容中有html结构时可以被解析为HTML标签，例如：

在这里插入图片描述

v-on

v-on为元素绑定事件，绑定的方法写在methods属性中。v-on:可以简写为@。

在这里插入图片描述
双击button，弹出提示框

简单的案例

加减数字，小于0提示不能再减小，大于0提示不能再增大

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue1</title>
    <style>
        #bpp{
            margin-top: 50px;
            margin-left: 200px;
            width: 270px;
            height: 40px;
            background-color: blanchedalmond;
        }
        button{
            width: 90px;
            height: 100%;
        }
        .num{
            display:inline-block;
            width: 90px;
            font-size: 40px;
            height: 100%;
            text-align: center;
            line-height: 40px;
            font-family: auto;
        }
        #bpp .num1{
            float: left;
            font-size: 30px;
            line-height: 30px;
        }
        #bpp .num2{
            position: relative;
            float: right;
            font-size: 30px;
            line-height: 30px;
        }
    </style>
</head>
<body>
    <div id="bpp">
        <button class="num1" @click="sub">-</button>
        <div class="num" v-text="num">0</div>
        <button class="num2" @click="add">+</button>
    </div>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var bpp = new Vue({
            el:"#bpp",
            data:{
                num:0
            },
            methods:{
                sub:function(){

                    if(this.num<=0){
                        alert("不能再减小了哦");
                    }else{
                        this.num--;
                    }
                },
                add:function(){
                    
                    if(this.num>=10){
                        alert("不能再增大了哦");
                    }else
                    this.num++;
                        
                }
            }
        })
    </script>
</body>
</html>

我是Dreamer啊

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
vue中的v-text，v-html，v-on属性

v-text设置标签的文本值(textContent)，无论内容是什么，只会解析成为文本。v-text是将数据设置给标签的文本属性，替换文本属性中原来的值，例如上图，通过程序的运行可以看出，高先生替换掉了第一个h2文本属性中的陕西这个值。在v-text属性中也可以使用字符串的拼接，例如：v-htmlv-html改变innerHTML值，内容中有html结构时可以被解析为HTML标签，例如：v-onv-on为元素绑定事件，绑定的方法写在methods属性中。v-on:可以简写为@。
复制链接

扫一扫