精华内容
下载资源
问答
  • vue获取input输入框数据

    千次阅读 2018-06-21 14:04:00
     Vue在这里做法和jQuery有细微区别,jQuery是通过id获取对应节点然后获取数据,而Vue则是通过ref获取input数据。username = this.$refs.username.value。 请输入账号" type="text" ref="username"/> 注意两...

        用惯了jQuery,突然使用vue感觉很不习惯,有很多不同的地方,感觉是两个不同的思想来写前端的代码。jQuery是使用选择器($)选取DOM对象,对其进行赋值、取值、事件绑定等操作。而Vue则是通过Vue对象将数据和View完全分离开来了。

        Vue在获取input中数据的方式和jQuery有略微的区别。

    <input class="login_input" placeholder="请输入账号" type="text" id="username"/>

        如上面一段代码,如果jQuery想要获取input的数据通常的做法是根据id获取,$('#username').val()。

        Vue在这里做法和jQuery有细微区别,jQuery是通过id获取对应节点然后获取数据,而Vue则是通过ref获取input数据。username = this.$refs.username.value。

    <input class="login_input" placeholder="请输入账号" type="text" ref="username"/>

    注意两则代码中的区别,一个是id一个是ref。

        

    转载于:https://my.oschina.net/zicheng/blog/1833389

    展开全文
  • vue输入框限制输入inb4: This is not another "setting up" a new project with Vue and TypeScript tutorial. Let's do some deep dive into more complex topics! inb4:这不是另一个使用Vue和TypeScript教程...

    vue输入框限制输入

    Logo

    inb4: This is not another "setting up" a new project with Vue and TypeScript tutorial. Let's do some deep dive into more complex topics!

    inb4:这不是另一个使用Vue和TypeScript教程“设置”新项目的方法。 让我们深入研究更复杂的主题!

    typescript is awesome. Vue is awesome. No doubt, that a lot of people try to bundle them together. But, due to different reasons, it is hard to really type your Vue app. Let's find out what are the problems and what can be done to solve them (or at least minimize the impact).

    typescript很棒。 Vue很棒。 毫无疑问,很多人试图将它们捆绑在一起 。 但是,由于不同的原因,很难真正键入您的Vue应用。 让我们找出问题所在以及可以解决的方法(或至少将影响最小化)。

    TLDR (TLDR)

    We have this wonderful template with Nuxt, Vue, Vuex, and jest fully typed. Just install it and everything will be covered for you. Go to the docs to learn more.

    我们有一个非常漂亮的模板Nuxt完整键入了NuxtVueVuexjest 。 只需安装它,一切将为您覆盖。 转到文档以了解更多信息。

    And as I said I am not going to guide you through the basic setup for three reasons:

    正如我所说,由于以下三个原因,我不会指导您完成基本设置:

    1. There are a lot of existing tutorials about it

      有很多关于它的现有教程
    2. There are a lot of tools to get started with a single click like Nuxt and vue-cli with typescript plugin

      有很多的工具,开始使用一个单一的点击喜欢Nuxtvue-clitypescript插件

    3. We already have wemake-vue-template where every bit of setup that I going to talk about is already covered

      我们已经有了wemake-vue-template ,其中我要谈论的所有设置都已涵盖

    组件类型 (Component typings)

    The first broken expectation when you start to work with Vue and typescript and after you have already typed your class components is that <template> and <style> tags are still not typed. Let me show you an example:

    当您开始使用Vuetypescript并在键入类组件之后,第一个破破的期望是<template><style>标记仍未键入。 让我给你看一个例子:

    <template>
      <h1 :class="$style.headr">
        Hello, {{ usr }}!
      </h1>
    </template>
    
    <script lang="ts">
    import Vue from 'vue'
    import Component from 'vue-class-component'
    import { Prop } from 'vue-property-decorator'
    
    @Component({})
    export default class HelloComponent extends Vue {
      @Prop()
      user!: string
    }
    </script>
    
    <style module>
    .header { /* ... */ }
    </style>

    I have made two typos here: {{ usr }} instead of {{ user }} and $style.headr instead of $style.header. Will typescript save me from these errors? Nope, it won't.

    我在这里做了两个错别字: {{ usr }}而不是{{ user }}$style.headr而不是$style.headertypescript会帮助我避免这些错误吗? 不,不会。

    What can be done to fix it? Well, there are several hacks.

    该如何解决? 好吧,这里有几个技巧。

    键入模板 (Typing the template)

    One can use Vetur with vetur.experimental.templateInterpolationService option to type-check your templates. Yes, this is only an editor-based check and it cannot be used inside the CI yet. But, Vetur team is working hard to provide a CLI to allow this. Track the original issue in case you are interested.

    可以将Veturvetur.experimental.templateInterpolationService选项一起使用,以对模板进行类型检查。 是的,这只是基于编辑器的检查,尚不能在CI中使用。 但是, Vetur团队正在努力提供CLI以允许这样做。 如果您有兴趣,请跟踪原始问题

    vetur

    The second option is two write snapshot tests with jest. It will catch a lot of template-based errors. And it is quite cheap in the maintenance.

    第二种选择是使用jest两次写快照测试。 它将捕获很多基于模板的错误。 而且它在维护上非常便宜。

    So, the combination of these two tools provides you a nice Developer Experience with fast feedback and a reliable way to catch errors inside the CI.

    因此,这两种工具的结合为您提供了良好的开发人员体验,并提供了快速的反馈和可靠的方式来捕获CI中的错误。

    打字风格 (Typing styles)

    Typing css-modules is also covered by several external tools:

    键入css-module s也可以通过几种外部工具来完成:

    The main idea of these tools is to fetch css-modules and then create .d.ts declaration files out of them. Then your styles will be fully typed. It is still not implemented for Nuxt or Vue, but you can tract this issue for progress.

    这些工具的主要思想是获取css-module s,然后.d.ts创建.d.ts声明文件。 然后,您的样式将被完全键入。 NuxtVue仍未实现该Nuxt ,但是您可以继续解决这个问题

    However, I don't personally use any of these tools in my projects. They might be useful for projects with large code bases and a lot of styles, but I am fine with just snapshots.

    但是,我并没有在项目中亲自使用任何这些工具。 对于具有大型代码库和许多样式的项目,它们可能很有用,但仅快照就可以了。

    Styleguides with visual regression tests also help a lot. @storybook/addon-storyshots is a nice example of this technique.

    带有视觉回归测试的样式指南也有很大帮助。 @storybook/addon-storyshots是此技术的一个很好的例子。

    威克斯 (Vuex)

    The next big thing is Vuex. It has some built-in by-design complexity for typing:

    下一件大事是Vuex 。 它具有一些内置的设计复杂性来进行键入:

    const result: Promise<number> = this.$store.dispatch('action_name', { payload: 1 })

    The problem is that 'action_name' might no exist, take other arguments, or return a different type. That's not something you expect for a fully-typed app.

    问题在于'action_name'可能不存在,采用其他参数或返回其他类型。 对于全类型应用程序,这不是您期望的。

    What are the existing solutions?

    现有的解决方案是什么?

    Vuex级 (vuex-class)

    vuex-class is a set of decorators to allow easy access from your class-based components to the Vuex internals.

    vuex-class是一组装饰器,可让您轻松地从基于类的组件访问Vuex内部。

    But, it is not typed safe since it cannot interfere with the types of state, getters, mutations, and actions.

    但是,它的类型不安全,因为它不会干扰状态,吸气剂,突变和动作的类型。

    vuex-class

    Of course, you can manually annotate types of properties.

    当然,您可以手动注释属性类型。

    vuex-class annotated

    But what are you going to do when the real type of your state, getters, mutations, or actions will change? You will have a hidden type mismatch.

    但是,当状态,吸气剂,突变或动作的真实类型发生变化时,您将怎么办? 您将遇到隐藏的类型不匹配。

    简单的vuex (vuex-simple)

    That's where vuex-simple helps us. It actually offers a completely different way to write your Vuex code and that's what makes it type safe. Let's have a look:

    这就是vuex-simple帮助我们的地方。 实际上,它提供了一种完全不同的方式来编写Vuex代码,这就是使其安全的原因。 我们来看一下:

    import { Action, Mutation, State, Getter } from 'vuex-simple'
    
    class MyStore {
    
      // State
    
      @State()
      public comments: CommentType[] = []
    
      // Getters
    
      @Getter()
      public get hasComments (): boolean {
        return Boolean(this.comments && this.comments.length > 0)
      }
    
      // Mutations
    
      @Mutation()
      public setComments (payload: CommentType[]): void {
        this.comments = updatedComments
      }
    
      // Actions
    
      @Action()
      public async fetchComments (): Promise<CommentType[]> {
        // Calling some API:
        const commentsList = await api.fetchComments()
        this.setComments(commentsList) // typed mutation
        return commentsList
      }
    }

    Later this typed module can be registered inside your Vuex like so:

    以后,可以像下面这样在您的Vuex内部注册该类型的模块:

    import Vue from 'vue'
    import Vuex from 'vuex'
    import { createVuexStore } from 'vuex-simple'
    
    import { MyStore } from './store'
    
    Vue.use(Vuex)
    
    // Creates our typed module instance:
    const instance = new MyStore()
    
    // Returns valid Vuex.Store instance:
    export default createVuexStore(instance)

    Now we have a 100% native Vuex.Store instance and all the type information bundled with it. To use this typed store in the component we can write just one line of code:

    现在,我们有了一个100%本机Vuex.Store实例,并捆绑了所有类型信息。 要在组件中使用这种类型的存储,我们可以只编写一行代码:

    import Vue from 'vue'
    import Component from 'nuxt-class-component'
    import { useStore } from 'vuex-simple'
    
    import MyStore from './store'
    
    @Component({})
    export default class MyComponent extends Vue {
      // That's all we need!
      typedStore: MyStore = useStore(this.$store)
    
      // Demo: will be typed as `Comment[]`:
      comments = typedStore.comments
    }

    Now we have typed Vuex that can be safely used inside our project. When we change something inside our store definition it is automatically reflected to the components that use this store. If something fails — we know it as soon as possible.

    现在,我们输入了可以在项目中安全使用的Vuex 。 当我们在商店定义中更改某些内容时,它会自动反映到使用该商店的组件中。 如果出现故障-我们会尽快知道。

    There are also different libraries that do the same but have different API. Choose what suits you best.

    也有不同的库执行相同的操作,但具有不同的API。 选择最适合您的东西。

    API调用 (API calls)

    When we have Vuex correctly setup, we need to fill it with data. Let's have a look at our action definition again:

    正确设置Vuex ,需要用数据填充它。 让我们再次看一下我们的动作定义:

    @Action()
    public async fetchComments (): Promise<CommentType[]> {
      // Calling some API:
      const commentsList = await api.fetchComments()
      // ...
      return commentsList
    }

    How can we know that it will really return a list of CommentType and not a single number or a bunch of AuthorType instances?

    我们怎样才能知道它真的会返回一个列表CommentType而不是一个单一number或一串AuthorType实例?

    We cannot control the server. And the server might actually break the contract. Or we can simply pass the wrong api instance, make a typo in the URL, or whatever.

    我们无法控制服务器。 服务器实际上可能违反合同。 或者,我们可以简单地传递错误的api实例,在URL中输入错误或其他。

    How can we be safe? We can use runtime typing! Let me introduce io-ts to you:

    我们如何安全? 我们可以使用运行时输入! 让我向您介绍io-ts

    import * as ts from 'io-ts'
    
    export const Comment = ts.type({
      'id': ts.number,
      'body': ts.string,
      'email': ts.string,
    })
    
    // Static TypeScript type, that can be used as a regular `type`:
    export type CommentType = ts.TypeOf<typeof Comment>

    What do we do here?

    我们在这里做什么?

    1. We define an instance of ts.type with fields that we need to be checked in runtime when we receive a response from server

      我们定义了ts.type的实例, ts.type包含当我们从服务器收到响应时需要在运行时检查的字段

    2. We define a static type to be used in annotation without any extra boilerplate

      我们定义了一个用于注释的静态类型,而无需任何额外的模板

    And later we can use it our api calls:

    然后我们可以使用它通过我们的api调用:

    import * as ts from 'io-ts'
    import * as tPromise from 'io-ts-promise'
    
    public async fetchComments (): Promise<CommentType[]> {
      const response = await axios.get('comments')
      return tPromise.decode(ts.array(Comment), response.data)
    }

    With the help of io-ts-promise, we can return a Promise in a failed state if the response from server does not match a ts.array(Comment) type. It really works like a validation.

    借助io-ts-promise ,如果服务器的响应与ts.array(Comment)类型不匹配,我们可以以失败状态返回Promise 。 它真的像验证一样工作。

    fetchComments()
       .then((data) => /* ... */
       .catch(/* Happens with both request failure and incorrect response type */)

    Moreover, return type annotation is in sync with the .decode method. And you cannot put random nonsense there:

    此外,返回类型注释与.decode方法同步。 而且您不能在这里随意胡扯:

    io-ts

    With the combination of runtime and static checks, we can be sure that our requests won't fail because of the type mismatch. But, to be 100% sure that everything works, I would recommend using contract-based testing: have a look at pact as an example. And monitor your app with Sentry.

    结合运行时检查和静态检查,我们可以确保我们的请求不会因为类型不匹配而失败。 但是,为100%确保一切正常,我建议使用基于合同的测试:以pact为例。 并使用Sentry监视您的应用程序。

    Vue路由器 (Vue Router)

    The next problem is that this.$router.push({ name: 'wrong!' }) does not work the way we want to.

    下一个问题是this.$router.push({ name: 'wrong!' })无法按照我们想要的方式工作。

    I would say that it would be ideal to be warned by the compiler that we are routing to the wrong direction and this route does not exist. But, it is not possible. And not much can be done: there are a lot of dynamic routes, regex, fallbacks, permissions, etc that can eventually break. The only option is to test each this.$router call in your app.

    我要说的是,最好由编译器警告我们正在朝错误的方向布线,并且该路由不存在。 但是,这是不可能的。 不能做的事情很多:最终可能会破坏很多动态路由,正则表达式,后备,权限等。 唯一的选择是测试应用程序中的每个this.$router调用。

    vue-test-utils (vue-test-utils)

    Speaking about tests I do not have any excuses not to mention @vue/test-utils that also has some problems with typing.

    说到测试,我没有任何借口,更不用说@vue/test-utils ,它在输入方面也存在一些问题。

    When we will try to test our new shiny component with typedStore property, we will find out that we actually cannot do that according to the typescript:

    当我们尝试使用typedStore属性测试新的闪亮组件时,我们会发现实际上无法根据typescript

    vue-test-utils

    Why does this happen? It happens because mount() call does not know anything about your component's type, because all components have a VueConstructor<Vue> type by default:

    为什么会这样? 发生这种情况是因为mount()调用对您的组件类型VueConstructor<Vue> ,因为默认情况下所有组件都具有VueConstructor<Vue>类型:

    vue-constructor

    That's where all the problems come from. What can be done? You can use vuetype to produce YouComponent.vue.d.ts typings that will tell your tests the exact type of the mounted component.

    那就是所有问题的根源。 该怎么办? 您可以使用vuetype生成YouComponent.vue.d.ts类型,这些类型将告诉您的测试所安装组件的确切类型。

    You can also track this issue for the progress.

    您也可以跟踪此问题以获取进度。

    But, I don't like this idea. These are tests, they can fail. No big deal. That's why I stick to (wrapper.vm as any).whatever approach. This saves me quite a lot of time to write tests. But spoils Developer Experience a little bit.

    但是,我不喜欢这个主意。 这些是测试,它们可能会失败。 没什么大不了的。 这就是为什么我坚持使用(wrapper.vm as any).whatever方式的原因。 这为我节省了大量时间来编写测试。 但是会破坏开发人员的经验。

    Make your own decision here:

    在这里做出自己的决定:

    • Use vuetype all the way

      一直使用vuetype

    • Partially apply it to the most important components with the biggest amount of tests and update it regularly

      将其部分应用到具有最多测试量的最重要组件,并定期进行更新
    • Use any as a fallback

      使用any作为后备

    结论 (Conclusion)

    The average level of typescript support in Vue ecosystem increased over the last couple of years:

    在过去几年中, Vue生态系统中的typescript支持平均水平有所提高:

    • Nuxt firstly introduced nuxt-ts and now ships ts builds by default

      Nuxt首先引入了nuxt-ts ,现在默认情况下提供了ts构建

    • Vue@3 will have improved typescript support

      Vue@3将改进typescript支持

    • More 3rd-party apps and plugins will provide type definitions

      更多的第三方应用程序和插件将提供类型定义

    But, it is production ready at the moment. These are just things to improve! Writing type-safe Vue code really improves your Developer Experience and allows you to focus on the important stuff while leaving the heavy-lifting to the compiler.

    但是,目前已经可以生产了。 这些只是需要改进的地方! 编写类型安全的Vue代码确实可以改善您的开发人员体验,并让您可以专注于重要的内容,而无需费力地进行编译。

    What are your favourite hacks and tools to type Vue apps? Let's discuss it in the comment section.

    您最喜欢键入Vue应用程序的黑客和工具是什么? 让我们在评论部分中讨论它。

    翻译自: https://habr.com/en/post/458632/

    vue输入框限制输入

    展开全文
  • vue输入框使用模糊搜索

    千次阅读 2020-05-25 10:15:13
    实现原理: 利用js的 indexOf 方法可...--输入框使用的是vant的输入框组件--> <van-search @input="autoSearch" v-model="value" placeholder="请输入搜索关键词" style="width:90%; display:inline-block;

    实现原理:
    利用js的 indexOf 方法可返回某个指定的字符串值在字符串中首次出现的位置。

    模板中的代码
    <div class="search">
    <!--输入框使用的是vant的输入框组件-->
    	<van-search
           @input="autoSearch"
           v-model="value"
           placeholder="请输入搜索关键词"
           style="width:90%; display:inline-block;"
        />
           <span>搜索</span>
        </div>
    <!--展示数据-->
    <ul
    	v-for="(item) in allArea"
        :key="item.communityId"
     >
        <li v-if="allNewArea.length != 0">{{ item.communityName }}</li>
         <li v-else>{{ item.communityName }}</li>
    </ul>
    
    js代码
    	getAreaDetail () { // 获取数据
          this.$http({
            method: 'post',
            url: '/appProperty/getCommunity',
          }).then(res => {
            this.allArea = res.data
            this.allNewArea = res.data
          })
        },
        autoSearch () { // 模糊搜索加节流(500ms触发一次)
          var allowPass = true
          if (!allowPass) {
            return
          }
          setTimeout(() => {
            allowPass = false
            this.allArea = [];
            this.allNewArea.filter(item => {
              if (item.communityName.indexOf(this.value) !== -1) { // 此处也可使用js的 search 方法实现indexOf 一样效果
                this.allArea.push(item);
              }
            })
          }, 500);
        },
    

    拓展

    节流函数 节省流量节省内存性能的一种函数,可以理解为是一种性能优化方案

     //首先定义一个全局变量 当浏览器窗口大小发生变化也就是重新计算窗口大小的时候触发
        var canRun = true;
        window.onresize = function () {
          if (!canRun) {
            return
          }
          canRun = false//设置一个定时器进行轮询操作
          setTimeout(function () {//这是要做的事情
            console.log("函数节流")//最后记得重新赋值true继续让他取反
            canRun = true//每隔1000毫秒也就是1秒钟就执行一次
          }, 1000)
        }
    

    防抖函数 当事件触发完成之后再延迟触发,并且只触发一次;如果在触发完成之前再次触发,则会再次刷新延迟

    //定义方法即要做的事情
     function fun(){
       console.log('onresize')
     }
    //定义事件触发要执行的方法,两个参数分别是传入的要做的事情和定时器的毫秒数
    function debounce (fn, delay) {  //定义一个变量作为等会清除对象
      var handle;  //这里用到了闭包,一个函数里面return另一个函数,变量相互牵引导致垃圾回收机制不会销毁handle变量
      return function () {      //在这里一定要清除前面的定时器,然后创建一个新的定时器
        clearTimeout(handle)       //最后这个定时器只会执行一次也就是事件触发完成之后延迟500毫秒再触发(这里的变量赋值是跟定时器建立连接,进行地址赋值,一定要重新赋值给handle  
        handle = setTimeout(function () {
          fn()
        }, delay)
      }
    }
    //给浏览器添加监听事件resize
    window.addEventListener('resize', debounce(fun, 500));
    
    两者区别
    1. 防抖函数和节流函数都是用来提升性能优化及用户体验的一种方案;

    2. 防抖函数在一个时间被触发多次,只有最后一次生效

    3. 节流函数n秒后触发一次,n秒内触发后,定时器重新计时

    展开全文
  • vue输入框联想词功能

    千次阅读 2019-05-22 07:03:51
    1.实现的功能输入框输入字符后,联想词列表出现,可以按“↓”或“↑”选择列表中的内容,也可以鼠标点选,且互相不影响选择样式,即只会出现一个被选中,“Enter”键发起检索。2.DOM结构<template> <div ...

    1.实现的功能

    输入框输入字符后,联想词列表出现,可以按“↓”或“↑”选择列表中的内容,也可以鼠标点选,且互相不影响选择样式,即只会出现一个被选中,“Enter”键发起检索。

    2.DOM结构

    <template>
        <div class="input-m">  
            <div class="search">    
                <input type="text" :placeholder=placeholder v-model="content" @keyup="input">  
            </div>  
        <ul class="associate-list" v-show="associateWords&&showList" @mouseout="selectedLi(0)">
            <li class="associate-item">{{inputContent}}</li>    
            <li class="associate-item" v-for="(item,index) of associateWords" :key="index" 
                @mouseover="selectedLi(index+1)">{{item}}</li>  
        </ul>
        </div>
    </template>复制代码

    3.变量

    content: '',---双向绑定的数据,input输入框中的内容,用户选择联想词列表时同步变化
    inputContent: '',---保存用户通过键盘输入的内容,不与用户选择的联想词列表同步变化
    focusIndex: 0,---用户选择的联想词<li>列表的下标
    associateWords: [],---联想词列表数组
    showList: true---是否显示联想词列表由此变量和associateWords的长度共同控制

    inputConent是用于记录用户通过键盘输入的内容,通过上下键选择或鼠标悬浮时选择的会通过双向绑定同步到content中,以百度搜索联想词列表为例,当用户一直按向下键时,超过联想词列表后,input框中的内容为用户最开始输入的内容。

    focusIndex记录用户选择的<li>标签的下标,当一直按向上或向下键时,会出现focusIndex超出<li>列表长度的或小于0的清理,用focusIndex = (focusIndex+length)%length操作,可以实现fousIndex总是在0至length-1范围内。

    当通过document.getElementsByClassName获取<li>数组时,数组下标从0开始,而foucusIndex初始值为0,当按下“↓”时,focusIndex+1,选中的就是<li>列表的下标为1的元素,即第2个<li>,这是不合理的。

    如果将focusIndex的下标初始值设为-1,满足了上边的需求。那么当按下“↑”时,focusIndex-1,通过取余操作可以得到foucusIndex = length-2,即<li>列表的倒数第2项,也是不合理的。

    故将用户输入的文字内容作为<li>列表的第一项,且隐藏,将focusIndex初始值设为0。这样就实现了按上下键选择,且超出显示的长度时,是用户通过键盘输入的内容。

    用showList与associateWords一起控制列表的显示,没有相关联想词时肯定不显示,但用户点击输入框以外的位置时,联想词列表应该可以隐藏。如果采用将associateWords来隐藏的话,用户再次点击输入框时,会多向服务器发送一次搜索相关联想词的请求。

    4.JavaScript部分

    input (e) {  
        //keyup事件的event    
        e = e || window.event      
        this.showList = true      
        // 按“↑” 键     
        if (e.keyCode === 38) {        
            this.focusIndex--        
            this.selectedLi()      
        } else if (e.keyCode === 40) {        
            // 按“↓”,数组下标从0开始,list的[0]项内容为用户输入内容,不显示,从[1]项开始显示        
            this.focusIndex++        
            this.selectedLi()      
        } else if (e.keyCode === 13) {        
            // 按“Enter”调用搜索函数        
            this.doSomething() //----向后台发送搜索请求     
            this.associateWords = []      
        } else {        
            // 用户继续输入时,将inputContent置空----非常重要的一步       
            this.inputContent = ''        
            this.focusIndex = 0        
            // 搜索联想内容        
            this.getAssociateWords() //----向后台请求相关联想词列表       
            this.clearSelected()      
        }    
    }复制代码

    与样式相关的js操作

    selectedLi (hoverIndex) {      
        // 当inputContent内容为空时,记录下搜索框中用户输入的内容,作为associate-item的第一项      
        if (this.inputContent === '') {        
        this.inputContent = this.content      
        }      
        let associateList = document.getElementsByClassName('associate-item')      
        // 移除已添加的.selected样式      
        for (var i = 0; i < associateList.length; i++) {        
            associateList[i].classList.remove('selected')      
        }      
        if (hoverIndex !== undefined) {        
            this.focusIndex = hoverIndex      
        }      
        // 一直按向下键超出联想内容li长度时,应回到联想内容第一个      
        this.focusIndex = (this.focusIndex + associateList.length) % associateList.length      
        // 为选中的li添加.selected样式      
        let selectedOne = associateList[this.focusIndex]      
        this.content = selectedOne.textContent      
        selectedOne.classList.add('selected')    
    }
    clearSelected () {      
        let associateList = document.getElementsByClassName('associate-item')      
        // 移除已添加的.selected样式      
        for (var i = 1; i < associateList.length; i++) {        
            associateList[i].classList.remove('selected')      
        }    
    }复制代码

    为除了input框以外的页面部分添加监听事件,点击input以外的部分时,隐藏联想词列表

    // 点击input输入框以外的位置时 隐藏联想词列表    
    document.body.addEventListener('click', e => {      
        if (e.target.nodeName === 'INPUT') {        
            this.showList = true      
        } else {        
            this.showList = false      
        }    
    })复制代码

    向后台服务器请求联想词列表

    getAssociateWords () {      
        let self = this      
        axios.get('XX/data.json').then(function (res) {        
             self.associateWords = result.slice(0, 5) 
        })    
    }复制代码


    展开全文
  • vue输入框搜索实现模糊查询

    万次阅读 2019-02-13 17:08:26
    carseriesList:[],//获取的车型车系数据 searchval:"",//输入框输入的值 newlist:[ {value:"张孟真",radio:"a1"}, {value:"车系名称2",radio:"a2"}, {value:"杨磊",radio:"a3"}, {value:"张平",radio:"a4"}, ...
  • 这篇文章将包括但不限于Vue,也将包括Vue相关的组件库等内容的记载,定期更新本篇文章,如果有没涉及到的坑可以在评论里说明或着私信我,希望集思广益,对大家都有帮助。1、【IE】【element-ui】组件库中el-table: ...
  • 创建vue实例,添加组件(使用数据的组件(插值表达式 {{ list}})、与搜索框组件(v-model 绑定searchVal)) 参考vue官方教程 在vue中添加计算属性 computed: { // 计算属性的 getter // newList 是输入框中的值...
  • 大家好,上一篇文章「vue基础」手把手教你编写一个简单的 Vue 组件,我们一起学习了如何编写一个简单的自定义组件,这篇文章我们将继续学习组件其它方面的内容,主要涉及组件的生命周期、属性设置、父子组件传值、槽...
  • vue实现搜索显示历史搜索记录,采用插件-good-storage 安装插件 npm install good-storage -S 在本地新建cache.js文件,该文件是关于本地存储的逻辑处理(缓存到本地的数据最大缓存15条,并且新的插入在第一位,...
  • Vue 是什么Vue是一套用于构建用户界面的渐进式框架。Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层,易上手,便于和第三方库或既有项目整合。现代化的工具链和各种类库结合使用,Vue也更适合做复杂的单...
  • 在前端项目开发过程中,为优化用户体验,可考虑在用户输入查询条件后按回车键... 在Vue中,已经为常用的按键设置了别名,这样我们就无需再去匹配keyCode,直接使用别名就能监听按键的事件。 其常用的快捷键如下图所示:
  • 点击删除按钮删除数据 2.点击添加按钮添加数据 完整代码 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;title&...
  • 那么本篇博文就来分享一个比较基础的知识点,在使用Vue开发的时候,使用input组件的时候,获取input输入框的值的方法,方便使用查阅。 在input使用过程中,一般常用的获取输入框的值的方法有三种:第一种是通过v-...
  • 现在数据和 DOM 已经被建立了关联,所有东西都是响应式的。什么是Vue.js?vue就是一个js库,并且无依赖别的js库。vue的核心库只关注视图层,非常容易与其它库或已有项目整合。Vue.js是一个轻巧、高性能、可组件化的...
  • vue 获取输入框的值 通过使用 v-model <input v-model="phone" type="number" maxlength="11" class="uni-input phone" placeholder="请输入手机号" cursor-spacing="10upx" /> data() { return { ...
  • 主要介绍了解决vue项目input输入框双向绑定数据不实时生效问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 场景:为了更好的用户体验,用户未填写数据做校验时候直接获取焦点,减少用户点击操作 原生JS操作DOM实现 使用mounted钩子函数,它表示页面一加载进来就执行函数里面的内容(和window.onload类似) //html部分 ...
  • <template> <a-input-search placeholder="名称" @change="searchInput" @search="onSearch" /> </template> <script> searchInput (e) { var sVal = e.target.value ...
  • Vue获取input输入框值的两种方式

    千次阅读 2020-05-05 09:54:09
    在使用Vue开发中,我们会常常获取input框的值,在这跟大家总结一下我常用的两种方式。 使用ref获取input框的值 <template> <div> <div class="logininfor"> <input type="text" ...
  • 今天小编就为大家分享一篇vue获取data数据改变前后的值方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue-输入框change事件并获取

    千次阅读 2019-10-01 02:58:12
    <input type="text" @change="specifiName($event)" ...//输入框的change事件 <input type="text" @input="specifiName($event)" />//输入框的输入事件 <input type="text" @keyup.enter="specifiN...
  • 的时候,获取到的值是已经过滤了,但是在input输入框里还保留着不符合规则的值,所以在这之前要先 this.emit(‘input’, ‘’) 将原来的值设为空值,再进行复制。 我理解的是:因为直接复制,组件没有检测到数据有...
  • 小程序 获取输入框数据法一:通过form提交获取法二:模拟Vue的双向数据绑定 法一:通过form提交获取 <form bindsubmit='submitInfo'> <input placeholder="请输入手机号" name="phone" /> <input ...
  • 这样获取了list中的id值并在另一输入框显示。 现在需要往后端传name参数 <p><img alt="" height="73" src="https://img-ask.csdnimg.cn/upload/1622359746870.png" width="442" /></p> 但现在前端只提取出了选中...
  • vue + element 项目中需要根据输入的值,立即对输入框数据进行判断; 如果使用 @change ,只有在失去焦点的时候触发; 这个时候可以用 oninput 监听 oninput oninput 事件在用户输入时触发。 该事件在 <...
  • Vue的el-input输入框无法输入数据

    千次阅读 2020-10-29 19:22:19
    导入store数据 数据绑定及变化监听 监听方法 一切准备就绪后对文本框进行输入 但却发现文本框无论怎么输都无法输入!!! 控制台也空空如也。。。 查阅资料无果后于是我决定自己来试试 尝试 新建一个输入框 ...
  • 一直觉得,小程序与Vue有着神似之风。这一点在我第一天开始接触小程序时就这么认为,或者说,任何...而最让我“着迷”的,莫过于曾让我夜夜辗转反侧的“ 数据传递(数据绑定) ”了。趁着一次偶然提起,将其记录下来。
  • AntdesignVue数字输入框 项目中遇到反绑数据的时候,对数字输入框进行值的更改,...而我原来的操作是接口获取数据后,对接口数据进行处理,然后对前端声明变量对象进行复制,类似于 Info.num = res.data.data;
  • }, //(在输入框获取焦点时)增加对键盘上下按键的支持,实现 +1 和-l 操作 currentKeyCode: function(e) { if (e.keyCode == 40) { if (this.currentValue ) return; this.currentValue -= 1; } else if (e....

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,497
精华内容 3,398
关键字:

vue输入框获取数据

vue 订阅