一、页面显示数据的几种方式

0、插值表达式

<body>
    <div id="root">
        <h2>{{number}}</h2>

    </div>
    
    <script>
        new Vue({
            el:"#root",
            data:{
                msg:"hello world",
                number:123
            }
        })
    </script>
</body>

运行结果：
在这里插入图片描述
其中data中的number是数值，将数值显示到页面上就要用到插值表达式{{number}}，这个已经并不陌生了，没啥好说的。

1、v-text指令

<body>
    <div id="root">
        <h2 v-text="number"></h2>

    </div>
    
    <script>
        new Vue({
            el:"#root",
            data:{
                msg:"hello world",
                number:123
            }
        })
    </script>
</body>

这个指令用于告诉页面需要显示的内容是number这个变量
运行结果：
在这里插入图片描述

2、v-html指令

<body>
    <div id="root">
        <h2 v-html="number"></h2>

    </div>
    
    <script>
        new Vue({
            el:"#root",
            data:{
                msg:"hello world",
                number:123
            }
        })
    </script>
</body>

运行结果：
在这里插入图片描述
由此可见这三种方式对于显示数值的效果是一样的。

二、v-text和v-html的区别

0、v-text

<body>
    <div id="root">
        <div v-text="content"></div>

    </div>
    
    <script>
        new Vue({
            el:"#root",
            data:{
                content:"<h1>hello world</h1>"
            }
        })
    </script>
</body>

运行结果：
在这里插入图片描述
可见，v-text指令会将h1标签转义后输出。

1、v-html

<body>
    <div id="root">
        <div v-html="content"></div>

    </div>
    
    <script>
        new Vue({
            el:"#root",
            data:{
                content:"<h1>hello world</h1>"
            }
        })
    </script>
</body>

运行结果：
在这里插入图片描述
这时候，输出的是html格式的内容，即h1标签没有被转义，发挥了该标签本身的作用。

三、v-on模板指令和方法

在代码编写时，v-on：可以简写为@
内容描述：用v-on模板指令绑定一个触发事件，使得点击页面中的content数据能弹出对应警告。
分析思路：
A. v-on绑定一个触发事件click，得到触发后执行相应函数handleClick
B.函数要写在vue实例中的参数methods中，该参数主要用于方法函数的构造
C.在函数方法体中写入事件触发后要执行的工作
代码如下：

<body>
    <div id="root">
        <div v-on:click="handleClick">{{content}}</div>

    </div>
    
    <script>
        new Vue({
            el:"#root",
            data:{
                content:"hello"
            },
            methods: {
                handleClick:function(){
                    alert('world')
                }
            }
        })
    </script>
</body>

运行结果：
在这里插入图片描述
点击hello时，会弹出world警告

内容描述：另一个需求，点击页面中的hello，将其改变成world，也就是改变content的值。
分析思路：
和上一题基本一致，只要将alert（“world”）改成this.content = “world”即可。
代码如下：

<body>
    <div id="root">
        <div @click="handleClick">{{content}}</div>

    </div>
    
    <script>
        new Vue({
            el:"#root",
            data:{
                content:"hello"
            },
            methods: {
                handleClick:function(){
                    this.content='world'
                }
            }
        })
    </script>
</body>

运行结果不做演示。

来源：https://blog.csdn.net/qq_43104672/article/details/98748263

标签

vue

root

content

【Vue.js学习笔记】Vue中的数据显示、事件触发和方法构造引用