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

た入场券 2022-10-25 12:56 139阅读 0赞

### v-text ###

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU3OTM0OA_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][20210131202002728.png]

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

### v-html ###

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

### v-on ###

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU3OTM0OA_size_16_color_FFFFFF_t_70_pic_center 1]  
双击button，弹出提示框  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU3OTM0OA_size_16_color_FFFFFF_t_70_pic_center 2]

### 简单的案例 ###

加减数字，小于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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU3OTM0OA_size_16_color_FFFFFF_t_70]: /images/20221024/988832ab2f324c09b0779170664ebf76.png
[20210131202002728.png]: /images/20221024/d4bcd90ae0cc46f6b2ddcf5b2e98874d.png
[20210131202256751.png_pic_center]: /images/20221024/c0e9210a5e3e4e8abff815bab2833a87.png
[20210131202305603.png_pic_center]: /images/20221024/3efdcc5c3c14402db8d081fb88470abc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU3OTM0OA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221024/e185477c1091493ba765fb746f11ffa4.png
[20210131202331515.png_pic_center]: /images/20221024/580920cd3f9d4799ba76d7c0836c1bb7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU3OTM0OA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221024/02e423adbf3a4d62871816c513f3ed44.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU3OTM0OA_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221024/cf032ac80ffb4843b1d07b072995e016.png