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

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>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

分类: Vue博客

0 条评论

发表评论

Avatar placeholder

您的电子邮箱地址不会被公开。