vue2.1-本地应用-内容绑定，事件绑定

小小蚂蚁仔.

已于 2022-05-03 19:46:30 修改

阅读量661

点赞数

分类专栏：前端的一点点文章标签： vue.js elementui javascript

于 2022-05-03 19:45:38 首次发布

本文链接：https://blog.csdn.net/weixin_44542265/article/details/124557693

版权

前端的一点点专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文详细介绍了Vue.js中的v-text指令用于设置元素文本，v-html用于设置元素innerHTML，以及v-on指令用于事件绑定。v-text和v-html的区别在于处理内容的方式，v-on指令支持事件监听，并可通过简写@实现。通过实例展示了计数器功能，演示了如何使用v-on绑定事件和更新数据。

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

一、内容绑定，事件绑定

1、v.text-设置标签的文本值

<!--本地应用-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v.text</title>
</head>
<body>
   <div id="app">
<!--       默认输出message和info-->
       <h2 v-text="message"></h2>
       <h2 v-text="info"></h2>
<!--       差值输出 message和info-->
       <h2 >{{message}}：差值部分</h2>
<!--       拼接符号输出-->
       <h2 v-text="message+'拼接部分'"></h2>
       <h2 >{{message+'拼接部分'}} ：差值部分</h2>
       <h2 >{{message}}+ {{info}}</h2>
   </div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data:{
            message:"我和vue有个约会！",
            info:"我和js有个约会"
        }
    })
</script>
</body>
</html>

运行结果：

总结：

a、v-text指令的作用是设置标签的内容text content

b、默认写法会替换全部内容，使用差值表达式{{}}可以替换指定内容

c、使用拼接符“+”，可以将内容进行拼接

2、v.htm-设置标签的innerhtml

<!--本地应用-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-html指令</title>
</head>
<body>
   <div id="app">
       <p v-html="content"></p>
       <p v-text="content"></p>
   </div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data:{
            content:"<a href='https://www.baidu.com/'>百度一下</a>"
        }
    })
</script>
</body>
</html>

运行结果：

总结：

a、v-html指令的作用是：设置元素的innerhtml

b、内容中有html结构会被解析为标签

c、 v-text指令无论内容是什么，只会解析为文本

3、v.on基础-为元素绑定事件

例1-单击双击事件

<!--本地应用-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-on指令基础</title>
</head>
<body>
   <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("去做吧！");
            }
        }
    })
</script>

</body>
</html>

运行结果：

例2-this关键字可以访问定义在data中数据

<!--本地应用-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-on指令基础</title>
</head>
<body>
   <div id="app">
       <h2 @click = "changeFood">{{food}}</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:{
        changeFood:function (){
            console.log(this.food); // 控制台输出日志
            this.food+=" 非常美味！"     }
        },
    })
</script>
</body>
</html>

运行结果：

初始展示、点击3次后展示

总结：

a、v-on指令的作用是：为元素绑定事件

b、事件名不需要写on

c、指令可以简写为@

d、绑定的方法定义在methods属性中

e、方法内部通过this关键字可以访问定义在data中数据

二、例-计数器

<!--本地应用-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo-计数器</title>
</head>
<body>
   <div id="app">
<!--       计数器功能区域-->
       <div class="input-num">
<!--           4、使用v-on将add、sub分别绑定给+、-按钮-->
           <button @click="sub"> - </button>
<!--           3、使用v-text 将num设置给span标签-->
           <span>{{num}}</span>
<!--           同4、-->
           <button @click="add"> + </button>
       </div>
   </div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    // 创建vue实例
    var app = new Vue( {
        el:"#app",
        //1、data中定义数据num，并赋初值1
        data:{
            num:1  },
        //2、methods中添加2个方法：add递增、sub递减
        methods:{
            //add方法判断num是否到达最大值，未到递增，到了弹出弹框提示
            add:function (){
                if(this.num<10){
                    this.num++;
                }else{  alert('已达到最大值'); }   },
            //sub方法判断num是否到达最大值，未到递减，到了弹出弹框提示
            sub:function (){
                if (this.num>0){
                    this.num--;
                }else { alert('已达到最小值'); }  }
        }    }    )
</script>
</body>
</html>

运行结果：

初始：

点击到最小：

点击到最大：

总结：

总结

a、创建vue示例时：el挂载点、data数据、methods方法

b、v-on指令的作用是绑定事件，简写为@

c、方法中通过this，关键字获取data中的数据

d、v-text指令的作用是：设置元素的文本值，简写为{{} }

e、v-html指令的作用是：设置元素的innerHtml

小小蚂蚁仔.

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
vue2.1-本地应用-内容绑定，事件绑定

一、内容绑定，事件绑定1、v.text-设置标签的文本值<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>v.text</title></head><body> <div id="app"><!-- 默认输出message
复制链接

扫一扫

专栏目录