'분류 전체보기' 카테고리의 글 목록 (5 Page)

오락기

리스트 렌더링

문방구앞오락기 2018. 5. 25. 17:15

2018. 5. 25. 17:15

v-for

반복문 처리

<html>

<body>

<h1>bootstrap test bootstrap test bootstrap test </h1>

{{ i-1}} times 4 equals {{ (i-1) * 4 }}

</li>

</ul>

</div>

</body>

new Vue({

el: '.container'

})

</script>

</html>

<html>

<body>

<h1>bootstrap test bootstrap test bootstrap test </h1>

</li>

</ul>

</div>

</body>

new Vue({

el: '.container' ,

data : {korean : [

"가",

"나",

"다",

"라",

"마"

]}

})

</script>

</html>

bootstrap test bootstrap test bootstrap test

<html>

<body>

<h1>bootstrap test bootstrap test bootstrap test </h1>

{{out.word}} // {{out.print}}

</li>

</ul>

</div>

</body>

new Vue({

el: '.container' ,

data : {korean : [

{ word : "가", print : "가나다"} ,

{ word :"나", print :"가나다"} ,

{ word :"다", print :"가나다"} ,

{ word :"라", print :"가나다"} ,

{ word :"마" , print :"가나다"} ,

]}

})

</script>

</html>

Index도 추가할수있따.

{{index}} // {{out.word}} // {{out.print}}

</li>

</ul>

bootstrap test
0 // 가 // 가나다
1 // 나 // 가나다
2 // 다 // 가나다
// 라 // 가나다
4 // 마 // 가나다

Key value로도 접근 가능

<html>

<body>

<h1>bootstrap test bootstrap test bootstrap test </h1>

{{index}} // {{key}} // {{value}}

</li>

</ul>

</div>

</body>

new Vue({

el: '.container' ,

data : {korean :

{ word : "가", print : "가나다"}

}

})

궁금증이 생겼다

이방법으로 리스트로 하면어떻게 될까 였다.

<html>

<body>

<h1>bootstrap test bootstrap test bootstrap test </h1>

{{index}} // {{key}} // {{value}}

</li>

</ul>

</div>

</body>

new Vue({

el: '.container' ,

data : {korean :[

{ word : "가", print : "가나다"},

{ word : "나", print : "나다마"}

]}

})

</script>

</html>

아마도 v-for에 인자값이 순서가 정해져있나보다

</script>

</html>

공식 가이드를 보면

item , index순서이다.

You can also provide a second argument for the key.
cdiv v-for=" (value, key) in object"*
{ { key {{ value Y}
c/div>
firstN ame: John
lastName: Doe
age: 30
And another for the index:
cdiv v-for=" (value, key, index) in object
{{ index D. key Y}: {{ value
< /div>
0. firstName: John
1. lastName: Doe
2. age: 30

하지만 요소가 3개일경우엔

Item key index순서인거같다.

자세한건 링크

https://vuejs.org/v2/guide/list.html#Mapping-an-Array-to-Elements-with-v-for

참조해야겠다.

저작자표시 (새창열림)

'오락기 > vue.js' 카테고리의 다른 글

상호 작용 (0)	2018.05.25
디렉티브 (0)	2018.05.25
vue vs jquery (0)	2018.05.25
코어 (0)	2018.05.25

디렉티브

문방구앞오락기 2018. 5. 25. 17:14

2018. 5. 25. 17:14

v-show

v-if

v-else

v-show - 엘리먼트 속성이 충족되었을때 보여준다.

<html>

<body>

<!--

-->

<pre>

</pre>

</div>

</body>

new Vue({

el: '#app',

data: {

message: '테스트입니다 v-show'

}

})

</script>

</html>

글자를 한글자도 쓰면

v-if v-show 대신 사용할수있음

<html>

<body>

<!--

-->

<pre>

</pre>

</div>

</body>

new Vue({

el: '#app',

data: {

message: '테스트입니다 v-if'

}

})

</script>

</html>

같은역활이지만

v-if는 template를 사용할수있따 v-show는 사용불가능

<html>

<body>

<h1> v-if template test</h1>

</template>

<pre>

</pre>

<!--

<pre>

</pre>

-->

</div>

</body>

new Vue({

el: '#app',

data: {

message: '테스트입니다 v-if'

}

})

</script>

</html>

코드에서보면 <template 에 message가 ! 없다면 이라고 되어있다

따라서 메시지가 null일경우에는 보여지고

메시지가 1글자라도있으면 버튼이 생기면서

문구는 사라질것이다

문구가 사라집니다.
send는 생겼습니다.
,; send
me SS 巳
"문구가 사라집니다.Wns巳nd는 생겼습니다.

v-else

<html>

<body>

</template>

<pre>

</pre>

<!--

<pre>

</pre>

-->

</div>

</body>

new Vue({

el: '#app',

data: {

message: '테스트입니다 v-if'

}

})

</script>

</html>

코드상으로는 message가 없으면 v-if

있으면 else문이 동작되게 해놨씁니다

v-else test
v-else -T-E-OI
"—ssæe- :
send

단독으로 사용했을때 v-show와 v-if의 차이점은?

설명으로는 v-show가 랜더링에 더 많은 리소스를 소모한다고 한다.

따라서 가이드에 따르면 v-if이 진정한 조건부 렌더링이라 한다.

저작자표시 (새창열림)

'오락기 > vue.js' 카테고리의 다른 글

상호 작용 (0)	2018.05.25
리스트 렌더링 (0)	2018.05.25
vue vs jquery (0)	2018.05.25
코어 (0)	2018.05.25

vue vs jquery

문방구앞오락기 2018. 5. 25. 17:12

2018. 5. 25. 17:12

<html>

<body>

아래는 vue.js 양방향 바인딩

<!--

<h1>{{message}}</h1>

</div>

-->

아래는 제이쿼리 input tag에 keyup 이벤트

<div>

</div>

</body>

new Vue({

el: '#app',

data: {

message: '이 페이지는 ' + new Date() + ' 에 로드 되었습니다'

}

})

$('#message').on( 'keyup' , function() {

var message = $('#message') .val();

$('h2').text(message);

})

</script>

</html>

저작자표시 (새창열림)

'오락기 > vue.js' 카테고리의 다른 글

상호 작용 (0)	2018.05.25
리스트 렌더링 (0)	2018.05.25
디렉티브 (0)	2018.05.25
코어 (0)	2018.05.25

코어

문방구앞오락기 2018. 5. 25. 17:11

2018. 5. 25. 17:11

<!DOCTYPE html>

<html>

<head>

<title>My first Vue app</title>

</head>

<body>

</div>

내 위에 잠시 마우스를 올리면 동적으로 바인딩 된 title을 볼 수 있습니다!

</span>

</div>

</div>

<ol>

</li>

</ol>

</div>

<p>{{ message }}</p>

</div>

<p>{{ message }}</p>

</div>

<ol>

<!--

이제 각 todo-item 에 todo 객체를 제공합니다.

화면에 나오므로, 각 항목의 컨텐츠는 동적으로 바뀔 수 있습니다.

또한 각 구성 요소에 "키"를 제공해야합니다 (나중에 설명 됨).

-->

<todo-item

v-for="item in groceryList"

v-bind:todo="item"

v-bind:key="item.id">

</todo-item>

</ol>

</div>

var app = new Vue({

el: '#app',

data: {

message: 'Hello Vue!'

}

})

var app2 = new Vue({

el: '#app-2',

data: {

message: '123 이 페이지는 ' + new Date() + ' 에 로드 되었습니다'

}

})

var app3 = new Vue({

el: '#app-3',

data: {

seen: true

}

})

var app4 = new Vue({

el: '#app-4',

data: {

todos: [

{ text: 'JavaScript 배우기' },

{ text: 'Vue 배우기' },

{ text: '무언가 멋진 것을 만들기' },

{ text123: '무언가 멋진 것을 만들기' },

{ text: '무언가 멋진 것을 만들기' }

]

}

})

var app5 = new Vue({

el: '#app-5',

data: {

message: '안녕하세요! Vue.js!'

methods: {

reverseMessage: function () {

this.message = this.message.split('').reverse().join('')

}

})

var app6 = new Vue({

el: '#app-6',

data: {

message: '안녕하세요 Vue!'

}

})

Vue.component('todo-item', {

props: ['todo'],

template: '<li>{{ todo.text }}</li>'

})

var app7 = new Vue({

el: '#app-7',

data: {

groceryList: [

{ id: 0, text: 'Vegetables' },

{ id: 1, text: 'Cheese' },

{ id: 2, text: 'Whatever else humans are supposed to eat' }

]

}

})

</script>

</body>

</html>

저작자표시 (새창열림)

'오락기 > vue.js' 카테고리의 다른 글

상호 작용 (0)	2018.05.25
리스트 렌더링 (0)	2018.05.25
디렉티브 (0)	2018.05.25
vue vs jquery (0)	2018.05.25

백준 2755 부녀회장이 될테야

문방구앞오락기 2018. 5. 25. 11:34

2018. 5. 25. 11:34

이 아파트에 거주를 하려면 조건이 있는데, “a 층의 b 호에 살려면 자신의 아래(a-1)층에 1호부터 b 호까지 사람들의 수의 합만큼 사람들을 데려와 살아야한다” 는 계약 조항을 꼭 지키고 들어와야 한다.

아파트에 비어있는 집은 없고 모든 거주민들이 이 계약 조건을 지키고 왔다고 가정 했을 때, 주어지는 양의 정수 k와 n에 대해 k층에 n호에는 몇 명이 살고 있나를 출력하라. 단, 아파트에는 0층부터 있고 각층에는 1호부터 있으며, 0층에 i호에는 i명이 산다.

2개 케이스

1층 3호

2층 3호

6
10

Colored By Color Scripter™

import java.util.*;

public class Main {

public static void main(String[] args) {

Scanner sc = new Scanner(System.in);

String input = sc.nextLine().trim();

int countTry = Integer.valueOf(input);

String disInput = "";

int bSum=0;

int count=1;

String output="";

int[][] arr = new int[15][15];

for(int i=0; i<15 ; i++) {

arr[0][i] = i+1;

arr[i][0] = 1;

}

for(int k=0 ; k <countTry ; k++) {

disInput = sc.nextLine().trim();

int a = Integer.parseInt(disInput);

disInput = sc.nextLine().trim();

int b = Integer.parseInt(disInput);

for(int i=1; i<=a ; i++) {

for(int j=1; j<=b; j++) {

arr[i][j]= arr[i][j-1] + arr[i-1][j];

}

System.out.println(arr[a][b-1]);

}

저작자표시 (새창열림)

'오락기 > codeWar' 카테고리의 다른 글

백준 1924 2007년 (0)	2018.05.25
백준 10250 acm호텔 (0)	2018.05.25
백준 8721267 벌집 (0)	2018.05.25
백준 2438 별찍기 (0)	2018.05.25
백준 2941 크로아티아 알파벳 (0)	2018.05.25

백준 1924 2007년

문방구앞오락기 2018. 5. 25. 11:33

2018. 5. 25. 11:33

오늘은 2007년 1월 1일 월요일이다. 그렇다면 2007년 x월 y일은 무슨 요일일까? 이를 알아내는 프로그램을 작성하시오.

첫째 줄에 x월 y일이 무슨 요일인지에 따라 SUN, MON, TUE, WED, THU, FRI, SAT중 하나를 출력한다.

1 1

MON

Colored By Color Scripter™

import java.util.*;

public class Main{

public static void main(String args[]){

int[] cal = { 31, 28 ,31 , 30 , 31, 30, 31, 31, 30, 31, 30, 31} ;

String[] cal2 = { "SUN" , "MON", "TUE", "WED", "THU", "FRI", "SAT" };

Scanner sc = new Scanner(System.in);

int t = 0;

int m = sc.nextInt();

int d = sc.nextInt();

for(int i = 0 ; i< m-1 ; i++){

t +=cal[i];

// System.out.println(cal[i]);

}

// System.out.println(t);

// System.out.println(d);

// System.out.println();

t=t+d;

t=t%7;

// System.out.println(t);

System.out.println(cal2[t]);

}

저작자표시 (새창열림)

'오락기 > codeWar' 카테고리의 다른 글

백준 2755 부녀회장이 될테야 (0)	2018.05.25
백준 10250 acm호텔 (0)	2018.05.25
백준 8721267 벌집 (0)	2018.05.25
백준 2438 별찍기 (0)	2018.05.25
백준 2941 크로아티아 알파벳 (0)	2018.05.25

백준 10250 acm호텔

문방구앞오락기 2018. 5. 25. 11:32

2018. 5. 25. 11:32

엘베가 젤 왼쪽

손님들은 1호부터 배정받아야하고

층수가 낮은것부터 채워나간다

테스트 케이스 와 h w n->방번호 를입력 하면 몇호인지 출력

2
6 12 10
30 50 72

402
1203

Colored By Color Scripter™

import java.util.*;

public class Main {

public static void main(String[] args) {

Scanner sc = new Scanner(System.in);

String input = sc.nextLine().trim();

int countTry = Integer.valueOf(input);

String disInput = "";

int h=0;

int w=0;

int num=0;

int count=1;

String output="";

for(int i=0 ; i <countTry ; i++) {

disInput = sc.nextLine().trim();

int a = disInput.indexOf(" ");

int b = disInput.lastIndexOf(" ");

h = Integer.parseInt(disInput.substring(0, a));

w = Integer.parseInt(disInput.substring(a+1, b));

num = Integer.parseInt(disInput.substring(b+1, disInput.length()));

while(num>h) {

num=num-h;

count++;

}

output = num+"";

if(count < 10) {

output +="0"+count;

}else {

output +=count;

}

System.out.println(output.trim());

count=1;

}

저작자표시 (새창열림)

'오락기 > codeWar' 카테고리의 다른 글

백준 2755 부녀회장이 될테야 (0)	2018.05.25
백준 1924 2007년 (0)	2018.05.25
백준 8721267 벌집 (0)	2018.05.25
백준 2438 별찍기 (0)	2018.05.25
백준 2941 크로아티아 알파벳 (0)	2018.05.25

백준 8721267 벌집

문방구앞오락기 2018. 5. 25. 11:30

2018. 5. 25. 11:30

일때 방을 지난갯수 표현 13까지는 3개 28까지는 5개

Colored By Color Scripter™

import java.util.*;

public class Main {

public static void main(String[] args) {

Scanner sc = new Scanner(System.in);

String input = sc.nextLine().trim();

int a = Integer.valueOf(input);

int count = 0;

int com = 1;

// Math.pow(6, complux);

// 7이하 +1

// 19이하 +2

// 37이하+3

// 61이하 +4

// 각 숫자 차이는 6 , 12 , 18 , 24 순으로 증가

while(true) {

// System.out.println(com +" 까지 a값은 -> " +a);

if( a <= (6*count) + com) {

break;

}

com = (6*count) + com;

count++;

}

System.out.println(count+1);

}

저작자표시 (새창열림)

'오락기 > codeWar' 카테고리의 다른 글

백준 1924 2007년 (0)	2018.05.25
백준 10250 acm호텔 (0)	2018.05.25
백준 2438 별찍기 (0)	2018.05.25
백준 2941 크로아티아 알파벳 (0)	2018.05.25
백준 5622 다이얼 (0)	2018.05.25

백준 2438 별찍기

문방구앞오락기 2018. 5. 25. 11:29

2018. 5. 25. 11:29

첫째 줄에는 별 1개, 둘째 줄에는 별 2개, N번째 줄에는 별 N개를 찍는 문제

*
**
***
****
*****

Colored By Color Scripter™

import java.util.*;

public class Main{

public static void main(String args[]){

Scanner sc = new Scanner(System.in);

int t = sc.nextInt();

for(int i = 1 ; i <= t ; i ++){

for(int j = 0 ; j<i ; j++){

System.out.print("*");

}

System.out.println();

}

저작자표시 (새창열림)

'오락기 > codeWar' 카테고리의 다른 글

백준 10250 acm호텔 (0)	2018.05.25
백준 8721267 벌집 (0)	2018.05.25
백준 2941 크로아티아 알파벳 (0)	2018.05.25
백준 5622 다이얼 (0)	2018.05.25
백준 2908 상수 (0)	2018.05.25

백준 2941 크로아티아 알파벳

문방구앞오락기 2018. 5. 25. 11:28

2018. 5. 25. 11:28

크로아티아 알파벳	변경
č	c=
ć	c-
dž	dz=
ñ	d-
lj	lj
nj	nj
š	s=
ž	z=

이고 위에 없는 알파벳은 한글자씩 샌다

ljes=njak

ddz=z=

Colored By Color Scripter™

import java.util.*;

public class Main {

public static void main(String[] args) {

Scanner sc = new Scanner(System.in);

String input = sc.nextLine().trim();

String str = input;

// String str = "nljj";

int count = str.length();

// dz

// lj

// nj

for(int i=0 ; i<str.length() ; i++) {

// System.out.println(str.charAt(i));

if(str.charAt(i) == '=' || str.charAt(i) == '-') {

count--;

// System.out.println("= - 빼기");

}

if( (str.charAt(i) == 'd' && str.length() - i >= 3) && str.charAt(i+1) == 'z' && str.charAt(i+2) == '=') {

count--;

i++;

// System.out.println("dz");

}

if((str.charAt(i) == 'l' && str.length() - i >= 2) && str.charAt(i+1) == 'j') {

count--;

i++;

// System.out.println("lj");

}

if((str.charAt(i) == 'n' && str.length() - i >= 2) && str.charAt(i+1) == 'j') {

count--;

i++;

// System.out.println("nj");

}

System.out.println(count);

}

저작자표시 (새창열림)

'오락기 > codeWar' 카테고리의 다른 글

백준 8721267 벌집 (0)	2018.05.25
백준 2438 별찍기 (0)	2018.05.25
백준 5622 다이얼 (0)	2018.05.25
백준 2908 상수 (0)	2018.05.25
백준 1157 단어공부 (0)	2018.05.25

PREV 이전 1 2 3 4 5 6 7 8 ···15 NEXT 다음

문방구앞오락기

오락기

리스트 렌더링

'오락기 > vue.js' 카테고리의 다른 글

디렉티브

'오락기 > vue.js' 카테고리의 다른 글

vue vs jquery

'오락기 > vue.js' 카테고리의 다른 글

코어

'오락기 > vue.js' 카테고리의 다른 글

백준 2755 부녀회장이 될테야

'오락기 > codeWar' 카테고리의 다른 글

백준 1924 2007년

'오락기 > codeWar' 카테고리의 다른 글

백준 10250 acm호텔

'오락기 > codeWar' 카테고리의 다른 글

백준 8721267 벌집

'오락기 > codeWar' 카테고리의 다른 글

백준 2438 별찍기

'오락기 > codeWar' 카테고리의 다른 글

백준 2941 크로아티아 알파벳

'오락기 > codeWar' 카테고리의 다른 글

+ Recent posts

티스토리툴바