728x90
반응형
vueex2.html
<!DOCTYPE html>
<!-- /vue1/src/main/webapp/20220530/vueex2.html -->
<html>
<head>
<meta charset="UTF-8">
<title>v-model 예제</title>
<script type="text/javascript" src="https:unpkg.com/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<div id="simple1">
<div>좋아하는 과일을 모두 골라주세요.</div>
<!-- v-model : 객체의 값으로 추가 -->
<input type="checkbox" value="사과" v-model="fruits">사과,
<input type="checkbox" value="포도" v-model="fruits">포도,
<input type="checkbox" value="수박" v-model="fruits">수박,
<input type="checkbox" value="키위" v-model="fruits">키위,
<input type="checkbox" value="참외" v-model="fruits">참외
</div>
<div id="simple2">
선택한 과일들 : <span v-html="fruits"></span>
</div>
<script type="text/javascript">
let model = {
fruits:[]
}
let simple1 = new Vue ({
el:"#simple1", data:model
})
let simple2 = new Vue ({
el:"#simple2", data:model
})
</script>
</body>
</html>728x90
반응형
'study > Vue' 카테고리의 다른 글
| [Vue] 28.computed : 함수를 데이터로 사용 (vueex6.html ) (0) | 2022.05.30 |
|---|---|
| [Vue] 28. v-for 예제2 (vueex5.html ) (0) | 2022.05.30 |
| [Vue] 28. v-for 예제 (vueex4.html ) (0) | 2022.05.30 |
| [Vue] 28. v-if : 조건 디렉티브 (vueex3.html ) (0) | 2022.05.30 |
| [Vue] 28. vue 예제1 (vueex1.html ) (0) | 2022.05.30 |