vue.js--基础事件定义,获取数据,执行方法传值
2023-09-11 14:14:15 时间
<template> <div id="app"> <h1>{{ msg }}</h1> <br> <button v-on:click="run1()"> 第一种写法</button> <br> <button @click='run2()'> 第二种写法</button> <br> <button @click='getMsg()'> 获取mesg</button> <br> <button @click='setMsg()'>更改mesg</button> <br> <button @click='addData()'>增加数据</button> <ul> <li v-for="item in list"> {{item}} </li> </ul> <br> <button @click="byvalue('values=1')">执行方法传值</button> <br> <button data-aid='123' @click="eventFn('$event')">事件对象</button> </div> </template> <script> /* 双向数据绑定,用于表单, */ export default { name: 'app', data () { return { msg: 'hello', list:[] } },methods:{ run1(){ alert("第一种方法") },run2(){ alert("第二种方法") },getMsg(){ alert(this.msg) },setMsg(){ this.msg="改变内容" },addData(){ for(var i=0;i<10;i++){ this.list.push("我是第"+i+" 条数据"); } },byvalue(env){ #进行传值 alert(env) },eventFn(e){ console.log(e); //e.srcElment.style.backgroud='red'; } } } </script> <style> h1, h2 { font-weight: normal; } .box{ width: 100px; height: 100px; background-color: #42b983 } </style>
相关文章
- Vue 组件开发
- List多个字段标识过滤 IIS发布.net core mvc web站点 ASP.NET Core 实战:构建带有版本控制的 API 接口 ASP.NET Core 实战:使用 ASP.NET Core Web API 和 Vue.js 搭建前后端分离项目 Using AutoFac
- js,jq滚动监听,切换等常用JS代码
- JS监听不到被操作后dom的事件,js动态生成的DOM绑定事件失效,解决方案
- Vue 命令行工具 Vue-CLI 详解
- 【Vue/js】Js中执行变量中的命令语句,也就是所谓的宏替换(很实用的例子)
- 【Vue】Vue-cli(脚手架)中的main.js内容解读
- vue-router 二级路由
- (17)打鸡儿教你Vue.js
- Vue项目 跨域 解决方案与 vue.config.js 配置解析
- vue--ui:antd pro框架--vue.config.js引入高德地图--描绘轨迹
- vue中的main.js打开直接报错问题解决
- Vue报错笔记(1)vue.esm.js?efeb:628 [Vue warn]: Property or method “handleClick“ is not defined on the...
- vue-cli3的vue.config.js文件配置,生成dist文件
- [js高手之路] vue系列教程 - 事件专题(4)
- vue项目如何实现剪切板功能--vue-clipboard2
- vue.js 使用 fastclick解决移动端click事件300毫秒延迟方法
- vue基础(三)
- Vue学习第14天——vue自定义事件及详细代码演示
- vue.js 样式绑定
- 基于webpack和vue.js搭建开发环境
- 从零开始学 Web 之 Vue.js(四)Vue的Ajax请求和跨域
- windows下载安装Vue开发者工具(VueDevtools),同时支持vue2.0和vue3.0两个版本
- vue数据代理