Vue.js - 2. 기본 예제(radio,checkbox)

Vue.js - 2. 기본 예제(radio, checkbox)

 

 

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@ taglib prefix="x" uri="http://java.sun.com/jsp/jstl/xml" %> <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %> <%@ taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql" %> <%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %> <%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %> <%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %> <%@ taglib prefix="lib" uri="https://lib.fnc.com" %> <div id="app"> <!-- ----------------------------------------------------------------------- --> <!-- 1. Radio 버튼-첫번째 --> <!-- ----------------------------------------------------------------------- --> <input type="radio" value="male" v-model="ansList['gender']"> 남자 <input type="text" v-model="ansList['gender_male']"> <input type="radio" value="female" v-model="ansList['gender']"> 여자 <br> <spand>당신의 성별은 : <lable v-text="ansList['gender']"></lable> </spand> <br><br> <!-- ----------------------------------------------------------------------- --> <!-- 2. Radio 버튼-두번째 --> <!-- ----------------------------------------------------------------------- --> <input type="radio" value="seoul" v-model="ansList['area']"> 서울 <input type="radio" value="incheon" v-model="ansList['area']"> 인천 <input type="text" v-model="ansList['area_incheon']"> <br> <spand>당신이 사는곳은 : <lable v-text="ansList['area']"></lable> </spand><br> <!-- ----------------------------------------------------------------------- --> <!-- 3. checkbox - 첫번째 --> <!-- ----------------------------------------------------------------------- --> <input type="checkbox" value="mac" v-model="ansList['notebook']"> 맥북 노트북 <input type="checkbox" value="sm" v-model="ansList['notebook']"> 삼성 노트북 <input type="checkbox" value="lg" v-model="ansList['notebook']"> LG 노트북 <br> <spand>당신이 원하는 브랜드는 : <lable v-text="ansList['notebook']"></lable> </spand><br><br> <lable v-text="ansList"></lable> <br><br> </div> <script> var vm = new Vue({ el:"#app" , data: { ansList : {} } , mounted: function(){ this.init(); } , methods: { init:function() { Vue.set(this.ansList, 'notebook', []); // this.ansList['gender'] = []; //radio버튼은 정의 하면 안됨 //this.ansList['area'] = []; //console.log('init method수행'); //console.log('ansList gender->' + this.ansList['gender']); //console.log('ansList ssssss->' + this.ansList['sss']); } } }) </script>