VUE基础（2）（v-HTML，v-test、v-on指令，计数器实例）

最新推荐文章于 2024-10-04 00:46:18 发布

MIMO. mimo

最新推荐文章于 2024-10-04 00:46:18 发布

阅读量119

点赞数

文章标签： vue.js html javascript

本文链接：https://blog.csdn.net/mimo_mimo/article/details/129508470

版权

本文介绍了Vue.js中的v-text用于替换标签内容，v-html用于设置innerHTML并解析HTML，以及v-on指令用于事件绑定。示例包括文本内容替换、HTML渲染和事件响应，强调了Vue.js中通过更改数据来动态更新界面的理念，并提供了一个计数器实例展示如何在1-5之间增减数值。

摘要由CSDN通过智能技术生成

本地应用

指令

v-test
设置标签的文本值，用这种方法将某一个标签里的内容全部替换成替换内容

如下实现v-text更改标签内所有内容及更改部分内容

    <div id="app">
        <!-- 通过v-text可以更改标签下全部内容 -->
        <h2 v-text="message"></h2>
        <!-- 通过插值表达式设置内容可以更改部分内容 -->
        <h2>深圳 {{message}} </h2>
    </div>

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

字符串的拼接实现，拼接字符串内容本可以“” 、‘ ’都可以，由于用了v-text属性=“ ”有双引号，内部拼接字符串用单引号

    <div id="app">
        <!-- 通过v-text可以更改标签下全部内容 -->
        <h2 v-text="message+'!'"></h2>
        <!-- 通过插值表达式设置内容可以更改部分内容 -->
        <h2>深圳 {{message+"!"}} </h2>
    </div>

内部支持写表达式

v-html指令

设置标签的innerHTML

如果有需要html渲染的内容就是用这条命令

普通文本用v-html不会有影响，更改为html格式的可以被解析，如下

<div id="app">
        <!-- 通过v-html可以更改标签下内容 -->
        <h2 v-html="normal"></h2>
        <h2 v-html="message+'!'"></h2>
        <h2 v-text="message+'!'"></h2>
    </div>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app=new Vue({
            el:"#app",
            data:{
                //普通文本html不会有影响
                normal:"普通文本",
                //更改为html格式的可以被解析
                message:"<a href='#'>链接</a>"
            }
        })
    </script>

v-on指令

为元素绑定事件

用户需要点击，按键盘等的事件时可以用v-

	<div id="app">
    <input type="button" value="事件绑定" v-on:事件名="方法">
    </div>

事件名：

点击：click
鼠标移入：mouseenter
双击：dblclick

方法：

写在methods实例中

v-on：可以替换为 @

案例：点击按钮弹出提示“it”

    <div id="app">
        <input type="button" value="v-on指令" v-on:click="doIT">
        <!-- //简写 -->
        <input type="button" value="v-on指令" @click="doIT">
        <input type="button" value="v-on指令" @dblclick="doIT">
    </div>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app=new Vue({
            el:"#app",
            methods:{
                doIT:function(){
                    alert('it');
                }
            }
        })
    </script>

vue中重点不是更改dom元素，而是更改界面的数据

例如：点击页面的文本后文本内容发生改变（每点击一次土豆加一个好吃）：

    <div id="app">
        <input type="button" value="v-on指令" v-on:click="doIT">
        <!-- //简写 -->
        <input type="button" value="v-on指令" @click="doIT">
        <input type="button" value="双击事件" @dblclick="doIT">
        <h2 v-text="food" @click="changeFood">  </h2>
    </div>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app=new Vue({
            el:"#app",
            data:{
                food:"土豆"
            },
            methods:{
                doIT:function(){
                    alert('it');
                },
                changeFood:function(){
                    this.food=this.food+"好吃";
                }
            },
            
        })
        </script>

在这里插入图片描述

this关键字点出我们需要更改的数据，做到对界面上数据做动态的更改

changeFood:function(){
            this.food=this.food+"好吃";
 }

计数器实例

计数器可以在1-5之间增加减少

<!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>计数器</title>
</head>
<body>
    <div class="input_num">
        <button @click="jian">
            -
        </button>
        <span >
            {{num}}
        </span>
        <button @click="plus">
            +
        </button>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var input_num = new Vue({
            el:".input_num",
            data:{
                num:1
            },
            methods:{
                plus:function(){
                    if(this.num<5){
                        this.num+=1;
                    }else{
                        alert('top');
                    }
                    
                },
                jian:function(){
                    if(this.num>1){
                        this.num-=1;
                    }else{
                        alert('到底了');
                    }
                    
                }
            }
        })
    </script>
</body>
</html>