VueJS----[内部指令-1.5]----v-on：绑定事件监听器&v-model

最新推荐文章于 2023-07-27 17:50:29 发布
最新推荐文章于 2023-07-27 17:50:29 发布
阅读量989 收藏
点赞数
分类专栏： VueJS 文章标签： VueJs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010996565/article/details/81176911
版权

v-on：绑定事件监听器&v-model

v-on 就是监听事件，可以用v-on指令监听DOM事件来触发一些javascript代码。

v-on

一、使用绑定事件监听器，编写一个加分减分的程序。
效果图这里写图片描述
完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-on</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>v-on</h1>
    <hr>
    <div id="app">
        本场比赛得分:{{score}}
        <button v-on:click="up">加分</button>
        <button @click="down">减分</button>
        <input type="text" v-on:keyup.enter="onEnter" v-model="score2">
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el:'#app',
            data:{
                score: 0,
                score2: 1
            },
            methods:{
                up:function(){
                    this.score++;
                },
                down:function(){
                    this.score--;
                },
                onEnter:function(){
                    this.score=this.score + parseInt(this.score2);
                }
            }
        });
    </script>
</body>
</html>

v-on还有一种简单的恶写法，就是用@代替

<button < @click="jianfen">减分</button>

除了可以绑定click之外，还可以绑定其他事件，比如键盘的回车键

<input type="text" v-on:keyup.enter="onEnter" v-model="secondCount">
 onEnter:function(){
     this.count=this.count+parseInt(this.secondCount);
}

因为文本框的数组会默认编程字符串，一次你需要用到parseInt()方法进行转换

v-model：

1、先看一个简单的双向数据绑定
HTML：

<p>原始文本信息：{{message}}</p>
<h3>文本框</h3>
<p>v-model:<input type="text" v-model="message"></p>

JS：

 var app = new Vue({
    el:'#app',
     data:{
         message: 'sdsd'
     }
 });

2.修饰符

.lazy:取代imput监听change事件这里写代码片
.number：输入字符串转成数字
.trim:输入去掉空格
<p>v-model.lazy:<input type="text" v-model.lazy="message"></p>
<p>v-model.number<input type="text" v-model.number="message"></p>
<p>v-model.trim<input type="text" v-model.trim="message"></p>

3.文本域加入数据绑定

<textarea  cols="30" rows="10" v-model="message"></textarea>

4.多选按钮绑定一个值

<h3>多选框绑定一个值</h3>
<input type="checkbox" id="isTrue" v-model="isTrue" />
<label for="isTrue">{{isTrue}}</label>

5.多选按钮绑定一个数组

<hr>
<p>
    <input type="checkbox" id="cheny" value="cheny" v-model="web_names" />
    <label for="isTrue">cheny</label>
    <input type="checkbox" id="boom" value="boom" v-model="web_names" />
    <label for="isTrue">boom</label>
    <input type="checkbox" id="chendayong" value="chendayong" v-model="web_names" />
    <label for="isTrue">chendayong</label>
</p>
<p>{{web_names}}</p>
var app = new Vue({
   el:'#app',
    data:{
        isTrue:true,
        web_names:[]
    }
});

6.单选按钮绑定数据

<h3>单选按钮绑定</h3>
<input type="radio" id="one" value="男" v-model="sex">
<label for="one">男</label>
<input type="radio" id="two" value="女" v-model="sex">
<label for="one">女</label>
<p>{{sex}}</p>

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-model</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>v-model</h1>
    <hr>
    <div id="app">
        <p>原始文本信息：{{message}}</p>
        <h3>文本框</h3>
        <p>v-model:<input type="text" v-model="message"></p>
        <p>v-model.lazy:<input type="text" v-model.lazy="message"></p>
        <p>v-model.number<input type="text" v-model.number="message"></p>
        <p>v-model.trim<input type="text" v-model.trim="message"></p>

        <hr>
        <h3>文本域</h3>
        <textarea cols="30" rows="10" v-model="message"></textarea>
        <hr>
        <h3>多选框绑定数组</h3>
        <input type="checkbox" id="isTrue" v-model="isTrue" />
        <label for="isTrue">{{isTrue}}</label>

        <hr>
        <p>
            <input type="checkbox" id="cheny" value="cheny" v-model="web_names" />
            <label for="isTrue">cheny</label>
            <input type="checkbox" id="boom" value="boom" v-model="web_names" />
            <label for="isTrue">boom</label>
            <input type="checkbox" id="chendayong" value="chendayong" v-model="web_names" />
            <label for="isTrue">chendayong</label>
        </p>
        <p>{{web_names}}</p>

        <hr>
        <h3>单选框的绑定</h3>
        <p>
            <input type="radio" id="one" value="男" v-model="sex">
            <label for="one">男</label>
            <input type="radio" id="two" value="女" v-model="sex">
            <label for="two">女</label>
            <p>你选择的性别是{{sex}}</p>
        </p>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el:'#app',
            data:{
                message: 'sdsd',
                isTrue:true,
                web_names:[],
                sex:'男'
            }
        });
    </script>
</body>
</html>
_cheny
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
绑定事件监听 v-on指令与其参数传递和修饰符
qiutian24的博客
10-04 475
v-on 1.基础 官方文档链接 https://cn.vuejs.org/v2/api/#v-on 作用：绑定事件监听。 事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。 预期：Function | Inline Statement | Object 语法： <div id="app"> <!--eventA()是自己定义的方法--> <button v-on:click="eventA()">A1
绑定事件监听器
yangna666的博客
01-03 662
今天培训了关于绑定事件监听器的方法，现做出如下总结： 1，直接绑定到标签。在.xml文件中定义一个按钮，将按钮作为事件源，里面为Button按钮绑定一个事件处理方法click。切记要先在Button里绑定事件处理方法这样在Activity中定义方法才有效。<Button android:id="@+id/btn_click" android:text="跳转到第二个
vue.js的事件绑定与监听
weixin_34041003的博客
08-17 164
事件绑定与监听 当模板渲染完成之后，就可以进行事件的绑定与监听。v-on指令用来监听DOM事件，通常在模板内直接使用。 <button v-on:click="say">Say</button> 方法及内联语句处理器 通过v-on绑定实力选项属性methods中的方法作为事件的处理器，v-on：后参数接受所有的原生事件名称。 <button v...
事件监听--v-on指令
qq_43618583的博客
01-23 246
事件监听 一、什么是事件监听 前端开发，需要经常交互。这个时候，我们需要监听用户发生的时间，如点击、拖拽、键盘事件等。 二、v-on指令 作用：绑定事件监听器 缩写：@ 例： <div id="example-1"> <button v-on:click="counter += 1">Add 1</button> <p>The button above has been clicked {{ counter }} times.</p> &l
4. Vue 监听子组件(v-model方式)
白怀宇的博客
06-13 813
Vue 监听子组件(v-model方式) 1 缺点：只能实现1个数据的绑定 <div id="app"> <input-mod v-model="inputVal"></input-mod> <div>{{ inputVal }}</div> </div> Vue.component('input-mod', { props: ['value'], template: ` <div>
vuejs-simple:vuejs源码简易实现-易
03-24
Vue.js 的核心特性之一是双向数据绑定，这通过`v-model`指令实现。在"vuejs-simple"中，可能会有一个简单的数据观察者（Observer）来监听和更新对象属性，以及一个依赖收集机制来跟踪哪些属性被哪些计算属性或视图...
vuejs-snippets：vuejs的样板
02-10
1. **模板语法**：Vue.js使用双大括号`{{ }}`进行数据绑定，用`v-bind`指令绑定属性，`v-on`用于事件监听，`v-if`和`v-for`分别用于条件渲染和循环遍历。此外，还有`v-model`实现双向数据绑定，`v-pre`和`v-cloak`...
vuejs-api:客户视图的 API 管理
05-29
- Vue.js 使用基于HTML的模板语法，允许开发者声明式地将数据绑定到DOM元素上，如`{{ }}`插值表达式、`v-bind`指令（用于动态绑定属性）和`v-on`指令（用于监听事件）。 3. **指令系统**： - Vue.js 提供了一系列...
vuejs-base-course:列出要学习vue.js基础的课程
04-08
5. **事件处理**：Vue.js 使用`v-on`指令处理DOM事件，可以轻松地将事件绑定到方法。 6. **指令系统**：Vue.js 提供了一系列预定义的指令，如`v-if`, `v-for`, `v-bind`等，它们在编译时进行特殊处理，简化了DOM...
vuejs-wrapper-devextreme
05-09
5. **事件处理**：VueJS使用`v-on`指令处理事件，而DevExtreme组件可能使用jQuery的事件监听。通过包装器，可以将这两个事件系统连接起来。 6. **组件通信**：在VueJS中，组件间通信可以通过props、事件总线（event...
Vue v-model 侦听器 watch
m0_45136861的博客
05-30 1277
v-model <h3>{{message}}</h3> <!-- 1.v-bind value的绑定 2.监听input事件, 更新message的值 --> <input type="text" :value="message" @input="inputChange"> <!-- v-model 像是 上面的语法糖 --> <input type="text" v-mode
vue 如何在循环中 “监听“ 的绑定v-model数据
xiawenyi1234的博客
06-22 2663
1.普通属性的值进行监听 vue中提供了一个watch方法，它用于观察vue实列上的数据变动，来响应数据的变化。 下面我们来分别学习下使用watch对对象的属性值进行监听，有如下几种，普通属性的监听，对象的属性值的监听。最后一种就是对input中的v-modle的动态数组的数据属性进行监听，最后一种不是使用watch来监听，本文的重点是最后一种的实现。在项目中会经常碰到使用v-model监听数据的。 <!DOCTYPE html> <html> <head> .
for循环数组对象元素的v-model如何实现监听
weixin_43258615的博客
08-18 757
用@input事件,获取需要监听的数据
vue新学习 02 vue命令v-model，数据代理（作用域和作用域链），事件，监听属性，计算属性（也就是把操作属性的语句放到vue实例中）
最新发布
qq_38757863的博客
07-27 560
而是直接就采用了new Vue（{}）这样子的形式，（v-bind和v-model在这个例子中都是如此，所以现在并没有数据代理的问题）所以此时数据的来源是vue实例对象，不是以后所采用的数据代理模式（也就是变量vm的数据来源）。v-model通常是和输入元素进行合作的，这一部分通常是表单标签，例如input，checkbox等等，功能是修改输入元素的值，会去修改相应的vue实例化的对象中的data中的相关属性。
vue练习 v-model @click v-for
前端大菜鸟
01-27 294
使用 v-model @click v-for编写了简单的发布功能 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.min.js"></script> <title></title> <style>
[vue学习笔记]数组+事件+v-model的使用
weixin_62697030的博客
12-12 778
事件就是我们的一些操作，比如点击（click） 按键（keyup），我们经常使用v-on为事件绑定一个js行为v-on:click="触发"；
vue watch监听
weixin_38673922的博客
07-28 585
vue watch监听。
Vue中watch的详解
RayShyy的博客
07-08 3万+
2.1 watch基础语法 被监听的数据：data中定义的数据； 数据改变后的值：该数据改变后的新值； 数据改变之前的值：该数据改变之前的值。 2.2 watch监听单个简单数据类型 在输入框中输入文本后： 这里text改变了三次，分别输入1、2、3，得到如上输出。2.3 监听复杂数据类型的某个属性的变化 检测某个属性值的时候需要用对象.属性名的写法，用法和简单数据类型一致。2.4 immediate (立即处理 进入页面就触发) 2.5 deep 深度监听 3. watch简写形式 代码如下：..
全网最详细的v-model讲解
热门推荐
zayyo的博客
11-29 15万+
v-model的基本使用 表单提交是开发中非常常见的功能，也是和用户交互的重要手段： 比如用户在登录、注册时需要提交账号密码； 比如用户在检索、创建、更新信息时，需要提交一些数据； 这些都要求我们可以在代码逻辑中获取到用户提交的数据，我们通常会使用v-model指令来完成： v-model指令可以在表单 input、textarea以及select元素上创建双向数据绑定； 它会根据控件类型自动选取正确的方法来更新元素； 尽管有些神奇，但 v-model 本质上不过是语法糖，它负责监听用户的输入事件来更新数据
Z-Stack 3.0中文手册：设备通信与路由详解
该手册主要覆盖了ZigBee网络的基本概念、设备角色（如协调器、路由器和终端设备）、设备寻址方法、设备绑定过程、路由功能以及相关的管理机制。以下是一些关键知识点： 1. **ZigBee网络架构**： - **设备类型**：...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值