在开发中总是忘记，特意在此记录 关键字： $event <div class="bed" v-on:click="updateBed(index,$event)">{{item.BedID}}<br>{{item.CriminalName}}</div> updateBed: function(index, e) { var selectedBedDom = $(e.srcElement)//dom元素 }PS：下面看下v-on:click获取当前事件对象元素 dom元素这样写: <i @click="iconToogle($event)" class="iconfont icon-xuanzhong1"></i>vue实例中的methods的写法: function (event){ c...
首先导入 <script type="text/javascript" src="/island/stage/js/vue.min.js"></script>html样式： <div id="main-content" class="wrap-container zerogrid"><article id="news_content" v-for="item in items"> <div class="col-1-2 right"> <img :src="item.coverimage"/><!--img标签与src之间需要有空格--> </div> <div class="col-1-2 left"> <a class="art-category left" href="#" rel="external nofollow" rel="external ...
最近做项目，需要用到vue,后台是php,第一次使用axios进行请求，本以为同ajax一样，会很简单，但是结果往往不让人满意啊，get请求很简单，这里就不说了，主要说下 post请求方式。 使用axios进行post请求，后台居然接收不到数据，这就纳闷了，于是网上一顿搜索，现在将所用的解决办法给大家说下： 1.new URLSearchParams方式 起初使用params.append("属性名"：属性值)的方式，对于简单的数据传递这样是没有问题的，后台可以正常接收数...
1. 引入jquery和vue.js <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript" src="http://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>2. JS <script type="text/javascript"> $(function(){vm = new Vue({el:#lst,data:{mcs : []}});getmc(); });function getmc(){$.get("getJsonData.action",function(msg){vm.mcs = msg}); } </script...
我们在vue，数据很多事异步获取来的，如果在template直接使用，会报错，undefined。 因为先渲染后得到的数据，那如何才能不报错呢？ computed!!! 举个例子 index.vue 忽略坑人的传参方式。。。created(){this.init()this.axios.post(/wanwei/appserver/eqInfo/eqBaseInfo?reqjson={"eq_code":"BJTE1W03011SF001SBQDGPXTGYKG001"}).then((res) => {this.$nextTick(()=>{this.$store.state.retData = res.data.retdata})})},在创建...
实例如下所示： <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="/vue.min.js"></script><script src="/vue-resource.min.js"></script><style>#th th{background-color: #50a9fa;color: aliceblue;font-size: large;}</style> </head> <body > <div id="app" align="center"><input type="text" v-model="id"><input type="text" v-model="pname"><button @click="addData">添加...
过渡动效 <router-view> 是基本的动态组件，所以我们可以用 <transition> 组件给它添加一些过渡效果： <transition><router-view></router-view> </transition> 单个路由的过渡 上面的用法会给所有路由设置一样的过渡效果，如果你想让每个路由组件有各自的过渡效果，可以在各路由组件内使用 <transition> 并设置不同的 name。 基于路由的动态过渡 还可以基于当前路由与目标路由的变化关系，动态设置过渡效果 <!-- 使用动态的 trans...
但是现在问题是父组件的数据是异步获取的，而子组件一开始就会渲染，如果此时没有传入数据，而子组件又要用到数据中的length属性时就会报错：怎么办呢？最简单的办法就是让子组件条件渲染，当有数据的时候才渲染，这样就不会抛出错误了。但是这还不够完美，子组件一般不直接使用父组件传来的值，二是监听一下，然后有变化了的时候再赋值给data，渲染的时候用data里的数据，这样就能保证随时动态更新数据 props: [floorGoods], data...
json 数组结构如下 "head": [{ "brand": "../static/images/brand.svg" }], "main": [{ "教程": [] },想要获取 “教程” 这两个字作为标题，.vue中方法如下 <h1> {{Object.keys(sMain)[0]}} <h1>其中的sMain是父级传下来的数组 import source from ./assets/data/source.json export default { data () { return { sHead: source.head[0], sMain: source.main[0] } } }以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大...
本文介绍了vue树形结构获取键值的方法示例，分享给大家，具体如下： 把键值文件放入引入控件 import { getTypeValue } from @/api/dict/dictValue/index; 点击搜索，打开弹窗 <el-form-item label="机构名称" placeholder="请选择机构" prop="orgName"><el-input readonly type="text" v-model="form.orgName"><el-button slot="append" icon="el-icon-search" @click="openDepartDialog()"></el-button></el-input></el-form-item...
自己利用业余时间，为了更加数据vue和es6的特性，自学着和做了vue的移动端webapp项目。在项目中也是遇到了很多的问题。 接下来，先说一下怎么实现这个需求，然后再说我遇到的问题，以用来纠错。 第一步，再vue项目中引入 jsonp ,并进行 jsonp 的封装。 使用 npm 引入，输入： npm install jsonp --save安装好之后可以在自己的 package.json 文件中查看是否有此依赖。如下图所示： 如果有红框中显示的内容，说明安装成功，进入下一...
遇到的问题 最近在开发一个Vue的项目，好几个页面都有用到一个 页面楼层滑动的组件，我就直接封装成了一个，但是遇到一个bug，就是我需要得到这个组件的offsetTop，然后页面滚动到这个位置的时候，就设置position属性为fixed，让他固定在屏幕上。问题是当我在mounted钩子函数中获取offsetTop的时候，在新开的页签中打开页面，会得到错误的offsetTop，但是在当前页面刷新，就不会有问题。 定位问题后来查到问题，就是加载的问题，新...
本文实例为大家分享了vue按时间段查询的案例，效果图如下html代码 <template> <div class="personalReport_time"><input type="date" :max="this.endTime" value="" v-model="startTime"/><div></div><input type="date" :min="startTime" :max="this.maxTime" v-model="endTime"/></div><ul class="personalReport_date"><li @click="query(today)">今天</li><li @click="query(yesterday)">昨天</li><li @click="query(weeks)">本...
html： <span @click=zan(pl.id) :data-id=pl.id></span>js： zan(e){var target=event.target;var dataid=e;//(pl.id的值);$(target)//当前点击的dom } 以上这篇vue获取当前点击的元素并传值的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
如下所示： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="./vue.js"></script> </head> <body> <label id="app"> <select v-model="selected" ><option v-for="option in options" v-bind:value="option.value">{{ option.text }}</option> </select> <span>Selected: {{ selected }}</span> </label> <script> new Vue({el: #app,data: {select...