vue에서 v-model의 동적 생성에 대한 자세한 설명-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

vue에서 v-model의 동적 생성에 대한 자세한 설명

小云云

Jan 20, 2018 am 10:55 AM

v-model동적상해

이 글은 Vue에서 동적으로 생성된 v-model의 자세한 예시에 대한 관련 정보를 주로 소개합니다. 이 글이 이 부분을 이해하고 익히는 데 도움이 되기를 바랍니다. .

vue

서문:

최근 회사 프로젝트에서 각 라인에는 입력과 선택이 있는 요구 사항이 있습니다. 라인 수는 서버에서 반환된 json 데이터가 동적으로 변경되는 것을 기반으로 합니다. 그렇다면 문제는 어떻게 v-모델을 동적으로 생성할 수 있느냐는 것입니다.

이제 프로젝트가 끝났으니 정리해서 코드를 직접 올렸습니다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="js/vue.js" ></script>
  </head>
  <body>
    <p id="app">
      <p class="line" v-for="(item,index) in dataModel">
        <input type="text" v-model="dataModel[index].value1" />
        <span>{{dataModel[index].value1}}</span>
        <button v-bind:data-index="index" v-on:click="submitClick">提交</button>

        <input type="text" v-model="dataModel[index].value2" />
        <span>{{dataModel[index].value2}}</span>
      </p>
    </p>
  </body>
  <script>
    var app = new Vue({
      el: "#app",
      data: {
        // 创建一个空的数组 
        dataModel: []
      },
      created: function(){
        // 这里是动态生成v-model,这个可以放在网络请求成功里面;
        var len = 4;
        for (var i = 0; i < len; i ++) {
          var item = {value1: &#39;&#39;,value2: &#39;&#39;};
          this.dataModel.push(item);
        }
      },
      methods: {
        // 显示v-model里面的数据
        submitClick: function(event){
          var tag = event.target;
          var index = tag.getAttribute(&#39;data-index&#39;);
          alert(this.dataModel[index].value1);
        }
      }
    })
  </script>
</html>

렌더링:

관련 기사

Vue中如何使用v-model.number实现输入框的数据类型转换Jun 11, 2023 am 08:54 AM

在Vue中，v-model是用来实现双向绑定的一个重要指令，它可以让我们很方便地将用户输入的内容同步到Vue的data属性中。但是在一些情况下，我们需要对数据进行转换，比如将用户输入的字符串类型转换成数字类型，这时候就需要使用v-model的.number修饰符来实现。v-model.number的基本用法v-model.number是v-model的一个修

php-fpm调优方法详解Jul 08, 2023 pm 04:31 PM

PHP-FPM是一种常用的PHP进程管理器，用于提供更好的PHP性能和稳定性。然而，在高负载环境下，PHP-FPM的默认配置可能无法满足需求，因此我们需要对其进行调优。本文将详细介绍PHP-FPM的调优方法，并给出一些代码示例。一、增加进程数默认情况下，PHP-FPM只启动少量的进程来处理请求。在高负载环境下，我们可以通过增加进程数来提高PHP-FPM的并发

Django框架中的缓存机制详解Jun 18, 2023 pm 01:14 PM

在Web应用程序中，缓存通常是用来优化性能的重要手段。Django作为一款著名的Web框架，自然也提供了完善的缓存机制来帮助开发者进一步提高应用程序的性能。本文将对Django框架中的缓存机制进行详解，包括缓存的使用场景、建议的缓存策略、缓存的实现方式和使用方法等方面。希望对Django开发者或对缓存机制感兴趣的读者有所帮助。一、缓存的使用场景缓存的使用场景

PHP function_exists()函数用法详解Jun 27, 2023 am 10:32 AM

在PHP开发中，有时我们需要判断某个函数是否可用，这时我们便可以使用function_exists()函数。本文将详细介绍function_exists()函数的用法。一、什么是function_exists()函数？function_exists()函数是PHP自带的一个内置函数，用于判断某个函数是否被定义。该函数返回一个布尔值，如果函数存在返回True，

PHP strpos()函数用法详解Jun 27, 2023 am 10:43 AM

PHPstrpos()函数用法详解在PHP编程中，字符串处理是非常重要的一部分。PHP通过提供一些内置函数来实现字符串处理。其中，strpos()函数就是PHP中最常用的一个字符串函数之一。该函数的目的是在一个指定的字符串中搜索另一个指定字符串的位置，如果包含则返回这个位置，否则返回false。本文将通过详细分析PHPstrpos()函数的用法，助你更好

解决Vue报错：无法使用v-model进行双向数据绑定Aug 25, 2023 pm 04:49 PM

解决Vue报错：无法使用v-model进行双向数据绑定在使用Vue进行开发时，经常会使用v-model指令来实现双向数据绑定，但有时候我们会遇到一个问题，就是在使用v-model时会报错，无法正确进行双向数据绑定。这可能是由于一些常见的错误导致的，下面我将介绍几种常见的情况以及相应的解决方法。组件的props属性未正确设置当我们在使用组件时，如果需要通过v-

Python中的GUI库wxPython详解Jun 09, 2023 pm 10:00 PM

Python是一种简洁、易学、高效的编程语言。它广泛应用于各种领域，如数据科学、人工智能、游戏开发、网络编程等。虽然Python自带有一些GUI库，但他们的功能较为简单，无法满足各类复杂应用的需求。因此，Python中有许多GUI库可供选择，其中wxPython是其中一个，本文将详细介绍。wxPython简介wxPython是一个开源、跨平台的GUI库，它基

Gin框架的模板渲染功能详解Jun 22, 2023 pm 10:37 PM

Gin框架是目前非常流行的Go语言Web框架之一。作为一个轻量级的框架，Gin提供了丰富的功能和灵活的架构，使得它在Web开发领域中备受欢迎。其中一个特别重要的功能是模板渲染。在本文中，我们将介绍Gin框架的模板渲染功能，并深入了解它的实现原理。一、Gin框架的模板渲染功能Gin框架使用了多种模板渲染引擎来构建Web应用程序。目前，它支持以下几种模板引擎：

See all articles

핫 AI 도구

뜨거운 도구

DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는

PhpStorm 맥 버전

최신(2018.2.1) 전문 PHP 통합 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

MinGW - Windows용 미니멀리스트 GNU

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.