vue.js 입력 상자 입력 값 내용 실시 간 응답 변화 예시 실현

본 고의 실례 는 vue.js 가 입력 상자 의 입력 값 내용 을 실시 간 으로 변화 에 응답 하 는 방법 을 설명 한다.여러분 께 참고 하도록 공유 하 겠 습 니 다.구체 적 으로 는 다음 과 같 습 니 다.

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
     content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>www.jb51.net         </title>
  <!-- Vue.js -->
  <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
</head>
<body>
 <div id="app">
   <input type="text" v-model="name" placeholder="    ">
  <h1>  ,{{ name }}</h1>
 </div>
</body>
</html>
<script>
  var myData = {
    name:''
  };
  var app = new Vue({
    el:'#app',
    data:myData,
  })
</script>

이 사이트 의 HTML/CSS/JS 온라인 실행 테스트 도 구 를 사용 하여:http://tools.jb51.net/code/HtmlJsRun다음 테스트 실행 효 과 를 얻 을 수 있 습 니 다:

본 고 에서 말 한 것 이 여러분 vue.js 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.

좋은 웹페이지 즐겨찾기