『从零开始学Vue』快速上手开发课设事件绑定实现简单计数器【图文详细】

发布时间：2023-02-18 19:00

👨‍🎓作者简介：一位喜欢写作，计科专业大二菜鸟
🏡个人主页：starry陆离
🕒首发日期：2022年5月11日星期三
📚订阅专栏：JavaWeb基础知识
🌌上期文章：【从零开始学Vue】快速上手开发课设 Vue基础知识【详细】

如果文章有帮到你的话记得点赞👍+收藏💗支持一下哦

$\"在这里插入图片描述\"$

【从零开始学Vue】快速上手开发课设事件绑定实现简单计数器【图文详细】

内容绑定,事件绑定

1. v-text

设置标签的文本值(textContent)

v-text指令的作用是:设置标签的内容(textContent)
默认写法会替换全部内容,使用差值表达式{{}}可以替换指定内容
内部支持写表达式

<h2 v-text="msg+'!'"></h2>  <!--默认写法-->
<h2>{{msg}}!</h2>           <!--插值表达式-->

$\"image-20220506224407366\"$

2. v-html

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

<body>
    <div id="app">
        {{msg}}
        <h2 v-text="msg+'!'"></h2>  <!--默认写法-->
        <h2>{{msg}}!</h2>           <!--插值表达式-->

        <h2 v-html="content"></h2>  <!--解析成标签-->
        <h2 v-text="content"></h2>  <!--解析为文本-->

    </div>

   <script src="./js/vue.js"></script>
   
   <script>
       var vm = new Vue({
           el:"#app",
           data:{
               msg:"hello vuejs",
               content:"<a href='https://www.baidu.com/'>百度</a>"
           }
       })
   </script>

$\"image-20220506225111580\"$

3. v-on

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

$\"image-20220506230434698\"$

4. 计数器

4.1 设计思路

data中定义数据:比如num
methods中添加两个方法:比如add(递增),sub(递减)
使用v-text将num设置给span标签
使用v-on将add,sub分别绑定给+,-按钮
累加的逻辑:小于10累加,否则提示
递减的逻辑:大于0递减,否则提示

4.2 代码展示

<!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>Document</title>
</head>
<body>
   
    <div id="app">
        <button @click="sub">-</button>
        <span>{{num}}</span>
        <button @click="add">+</button>
    </div>

    <script src="./js/vue.js"></script>
    <script>
        var vm=new Vue({
            el:"#app",
            data:{
                num:1
            },
            methods:{
                add:function(){
                    if(this.num<10){
                        this.num++;
                    }else{
                        alert('别点啦，最大啦!');
                    }
                },
                sub:function(){
                    if(this.num>0){
                        this.num--;
                    }else{
                        alert('别点啦，最小啦!')
                    }
                }
            },
        })
    </script>
</body>
</html>

4.3 效果演示

$\"vue计数器\"$
可以看到一个基本的计数器的小功能就实现啦，这个功能在我们网购等页面都是常见的

下期预告【从零开始学Vue】快速上手开发课设实现简单图片切换器【图文详细】

『从零开始学Vue』快速上手开发课设 事件绑定实现简单计数器【图文详细】

【从零开始学Vue】快速上手开发课设 事件绑定实现简单计数器【图文详细】

内容绑定,事件绑定

1. v-text

2. v-html

3. v-on

4. 计数器

4.1 设计思路

4.2 代码展示

4.3 效果演示

下期预告 【从零开始学Vue】快速上手开发课设 实现简单图片切换器【图文详细】

相关推荐

『从零开始学Vue』快速上手开发课设事件绑定实现简单计数器【图文详细】

【从零开始学Vue】快速上手开发课设事件绑定实现简单计数器【图文详细】

下期预告【从零开始学Vue】快速上手开发课设实现简单图片切换器【图文详细】