Vue学习02——v-text、v-html、v-on

最新推荐文章于 2023-06-16 10:04:47 发布

Duing_

最新推荐文章于 2023-06-16 10:04:47 发布

阅读量256

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/J_Du_pro/article/details/108429006

版权

Vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

v-text指令

v-text指令的作用是：设置标签的文本值
默认写法会替换全部内容，使用插值表达式{{}}可以替换指定内容
内部支持写表达式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue学习</title>
</head>
<body>
    <div id="app">
        <h2 v-text="message+'!!!'">Vue</h2>
        <h2 v-text="info"></h2>
        <h2>Vue,{{message+'!!'}}</h2>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data: {
                message:"前端开发",
                info:"全栈开发"
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

v-html指令

v-html指令的作用是：设置元素的innerHTML
内容中有html结构会被解析为标签
v-text指令无论是什么，只会解析为文本
解析文本内容使用v-text，需要解析html结构使用v-html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue学习</title>
</head>
<body>
    <div id="app">
        <p v-text="content"></p>
        <p v-html="content"></p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data: {
                content:"<a href='https://www.baidu.com/'>百度</a>"
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

v-on指令

v-on指令的作用是：为元素绑定事件
事件名不需要写on
指令可以简写为@
绑定的方法定义在methods在属性中
方法内部通过this关键字可以获取或定义data中的数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue学习</title>
</head>
<body>
    <div id="app">
        <input type="button" value="v-on指令" v-on:click="doIt">
        <h2>{{food}}</h2>
        <input type="button" value="v-on简写" @click="changeFood">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data: {
                food:"西兰花炒蛋"
            },
            methods:{
                doIt:function(){
                    alert("做It")
                },
                changeFood:function(){
                    this.food+="好好吃！"
                }
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

计数器小案例

创建Vue实例时：el（挂载点），data（数据），method（方法）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue学习</title>
</head>
<body>
    <div id="app">
        <button v-on:click="sub">-</button>
        <span>{{num}}</span>
        <button v-on:click="add">+</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data: {
                num:1
            },
            methods:{
                sub:function(){
                    if(this.num==0){
                        alert("不能再减啦！")
                    }
                    else{
                        this.num--
                    }
                },
                add:function(){
                    if(this.num==10){
                        alert("不能再加啦！")
                    }
                    else{
                        this.num++
                    }
                }
            }
        })
    </script>
</body>
</html>