위키
포럼
도구
바뀐글
랜덤

"Vue.js 클릭이벤트 v-on:click"의 두 판 사이의 차이

잔글 (봇: 자동으로 텍스트 교체 (-== 참고 자료 == +==참고==))
잔글 (봇: 자동으로 텍스트 교체 (-</source> +</syntaxhighlight>, -<source +<syntaxhighlight ))
 
(다른 사용자 한 명의 중간 판 2개는 보이지 않습니다)
2번째 줄: 2번째 줄:
;<nowiki>Vue.js 클릭이벤트 v-on:click</nowiki>
;<nowiki>Vue.js 클릭이벤트 v-on:click</nowiki>


<source lang='html'>
<syntaxhighlight lang='html' highlight='3'>
<div id="app-5">
<div id="app-5">
   <p>{{ message }}</p>
   <p>{{ message }}</p>
22번째 줄: 22번째 줄:
})
})
</script>
</script>
</source>
</syntaxhighlight>
<jsfiddle height='120'>mjLaj2yt</jsfiddle>
<jsfiddle height='120'>mjLaj2yt</jsfiddle>


==같이 보기==
==같이 보기==
* [[Vue.js 단축표기]]
* [[Vue.js 시작하기]]
* [[Vue.js 시작하기]]
* [[Vue.js 계산된 속성 computed]]
* [[Vue.js 계산된 속성 computed]]

2020년 11월 2일 (월) 02:54 기준 최신판

1 개요[ | ]

Vue.js 클릭이벤트 v-on:click
<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">메시지 뒤집기</button>
</div>

<script src="//unpkg.com/vue"></script>
<script>
var app5 = new Vue({
  el: '#app-5',
  data: {
    message: '안녕하세요! Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})
</script>

2 같이 보기[ | ]

3 참고[ | ]

원본 주소 "https://zetawiki.com/w/index.php?title=Vue.js_클릭이벤트_v-on:click&oldid=607435"
문서 댓글 ({{ doc_comments.length }})
{{ comment.name }} {{ comment.created | snstime }}