반응형
<!-- https://www.w3schools.com/Jquery/jquery_ajax_get_post.asp -->
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0,
minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuex"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- particles.js lib - https://github.com/VincentGarreau/particles.js -->
<script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<!-- stats.js lib -->
<script src="http://threejs.org/examples/js/libs/stats.min.js"></script>
</head>
<body>
<div id = "app">
<span> {{ state }} </span>
<br><br>
<button id="showme"> show </button>
<button id="hideme"> hide </button>
<br><br>
<button class="showClass"> show2 </button>
<button class="hideClass"> hide2 </button>
<br><br>
<button id="showhide"> show/hide </button>
<p id="vueWatch">www.crocus.co.kr</p>
</div>
<script>
var vm = new Vue({
el : "#app",
created(){
$(document).ready(function(){
$('#showme').click(function(){
vm.$data.state = 'show'
$('p').show();
});
$('#hideme').click(function(){
vm.$data.state = 'hide'
$('p').hide();
});
$(".showClass").click(function(){
vm.$data.state = 'show2'
$("p").show(500);
});
$(".hideClass").click(function(){
vm.$data.state = 'hide2'
$("p").hide("slow");
});
$("#showhide").click(function(){
vm.$data.state = 'show/hide'
$("p").toggle(300);
});
});
},
data: {
state: 'show'
},
});
</script>
</body>
</html>
Vue와 Jquery를 이용한 show hide toggle이다.
단순 Jquery만을 이용하기 위해서는 created 내부 값만 보면 된다.
이때 클래스를 받기 위해서는 '.클래스명', id를 받기 위해서는 '#아이디명'을 기입한다. 이는 CSS와 동일하다.
그리고 show 혹은 hide, toggle의 인자에 값이 들어가면 애니메이션이 fade되는 효과를 줄 수 있고 "slow"는 const한 내부 값임을 알 수 있다.
반응형
'Basic > Jquery' 카테고리의 다른 글
| Tistory 메뉴에서 구분자 만들기 (0) | 2019.11.08 |
|---|---|
| Jquery를 이용한 특정 href 속성을 가진 element 찾기 (0) | 2019.11.04 |
| Jquery attr 메서드를 쓸 때 조심할 점 (0) | 2019.09.18 |
| jquery를 이용한 slider (0) | 2018.08.21 |
| Jquery를 이용한 ajax get post (0) | 2018.08.15 |