Vue.js의 v-for로 분할 할당
v-for 지시어로 객체의 분할 할당 과 같은 것을 하고 싶었습니다만, 「Vue.js 분할 대입」이나 「v-for 분할 대입」과 같이 검색해도 히트하지 않고 , 영어에서 "Vue.js Destructuring assignment"를 찾으면 Vue.js quick tip: Using destructuring assignment in for loops라는 기사를 발견했습니다.분할 할당 이미지
<ul>
<li v-for="{name, price} in products">{{ name }} - {{ price }}</li>
</ul>
기사에 의하면
v-for 지시어 내에서도 분할 대입을 사용할 수 있다는 것이었으므로, 시험해 보았습니다.v-for 지시문에서 분할 할당을 사용해보십시오.
Vue.js를 사용하는 데 가장 쉬운 CDN 버전을 사용해보십시오.
테스트 페이지
v-for-destructuring-assignment.html<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Vue.js v-for 分割代入テスト</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="{name, price} in products">{{ name }} - {{ price }}</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
(function () {
'use strict';
var app = new Vue({
el: '#app',
data: {
products: [
{ name: 'Product 1', price: 300 },
{ name: 'Product 2', price: 100 },
{ name: 'Product 3', price: 200 }
]
}
});
})();
</script>
</body>
</html>
현대 브라우저라면 다음과 같은 목록이 표시됩니다.
궁금한 곳
Vue.js 공식 문서에 표시되지 않음 (테스트 코드 있음)
공식 문서의 목록 렌더링 — Vue.js 에는 분할 대입에 관한 기재가 없습니다만, vuejs/vue (GitHub) 의 테스트 코드 에는 분할 대입에 관한 테스트가 있었습니다 ( if (supportsDestructuring) 에 계속되는 블록).
실제로 테스트 코드를 실행하지는 않았지만 Vue.js는 v-for 지시문 내에서 분할 할당 (객체 분할 할당뿐만 아니라 배열 분할 할당)도 지원합니다. 아닐까 생각됩니다.
CDN 버전 Vue.js & Internet Explorer 11의 조합으로는 사용할 수 없다
Vue.js quick tip: Using destructuring assignment in for loops 의 기사에, 「ES6의 기능을 사용하고 있기 때문에 IE에서는 서포트하고 있지 않다」와 같은 기술이 있는 것을 깨달았습니다.
We are modern web developers (at least I hope so) and therefore we are going to use modern ES6 functionality (ignoring the fact, that old browsers, which almost nobody uses, don't support those features - namely IE).
테스트 코드 supportsDestructuring의 정의를 보면 분할 할당 구문을 지원하는 경우에만 테스트를 실행하는 것처럼 보입니다.
(이 supportsDestructuring(이전에 Qiita에 쓴 【JavaScript】 ES6이나 ES2017의 구문을 사용할 수 있는지 판정하는 방법의 기사와 같은 방법으로 분할 대입 구문을 사용할 수 있는지 판정하고있는 것 같습니다)
실제로 위에서 설명한 HTML (테스트 페이지, CDN 버전 Vue.js 사용)을 IE11에로드하면 목록을 표시 할 수 없습니다.
따라서 CDN 버전 Vue.js & IE11의 조합에서는 분할 대입을 사용하지 않도록 할 필요가 있습니다.
IE11에서도 움직이는 v-for<ul>
<li v-for="product in products">{{ product.name }} - {{ product.price }}</li>
</ul>
템플릿을 컴파일하려면 Internet Explorer 11에서도 OK
webpack + vue-loader의 경우 *.vue 파일의 템플릿을 빌드시 JavaScript로 변환하기 때문에 번들 된 .js를 Babel에서 ES5로 변환하면 IE11에서도 문제없이 작동했습니다.
요약
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Vue.js v-for 分割代入テスト</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="{name, price} in products">{{ name }} - {{ price }}</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
(function () {
'use strict';
var app = new Vue({
el: '#app',
data: {
products: [
{ name: 'Product 1', price: 300 },
{ name: 'Product 2', price: 100 },
{ name: 'Product 3', price: 200 }
]
}
});
})();
</script>
</body>
</html>
Vue.js 공식 문서에 표시되지 않음 (테스트 코드 있음)
공식 문서의 목록 렌더링 — Vue.js 에는 분할 대입에 관한 기재가 없습니다만, vuejs/vue (GitHub) 의 테스트 코드 에는 분할 대입에 관한 테스트가 있었습니다 (
if (supportsDestructuring) 에 계속되는 블록).실제로 테스트 코드를 실행하지는 않았지만 Vue.js는
v-for 지시문 내에서 분할 할당 (객체 분할 할당뿐만 아니라 배열 분할 할당)도 지원합니다. 아닐까 생각됩니다.CDN 버전 Vue.js & Internet Explorer 11의 조합으로는 사용할 수 없다
Vue.js quick tip: Using destructuring assignment in for loops 의 기사에, 「ES6의 기능을 사용하고 있기 때문에 IE에서는 서포트하고 있지 않다」와 같은 기술이 있는 것을 깨달았습니다.
We are modern web developers (at least I hope so) and therefore we are going to use modern ES6 functionality (ignoring the fact, that old browsers, which almost nobody uses, don't support those features - namely IE).
테스트 코드
supportsDestructuring의 정의를 보면 분할 할당 구문을 지원하는 경우에만 테스트를 실행하는 것처럼 보입니다.(이
supportsDestructuring(이전에 Qiita에 쓴 【JavaScript】 ES6이나 ES2017의 구문을 사용할 수 있는지 판정하는 방법의 기사와 같은 방법으로 분할 대입 구문을 사용할 수 있는지 판정하고있는 것 같습니다)실제로 위에서 설명한 HTML (테스트 페이지, CDN 버전 Vue.js 사용)을 IE11에로드하면 목록을 표시 할 수 없습니다.
따라서 CDN 버전 Vue.js & IE11의 조합에서는 분할 대입을 사용하지 않도록 할 필요가 있습니다.
IE11에서도 움직이는 v-for
<ul>
<li v-for="product in products">{{ product.name }} - {{ product.price }}</li>
</ul>
템플릿을 컴파일하려면 Internet Explorer 11에서도 OK
webpack + vue-loader의 경우
*.vue 파일의 템플릿을 빌드시 JavaScript로 변환하기 때문에 번들 된 .js를 Babel에서 ES5로 변환하면 IE11에서도 문제없이 작동했습니다.요약
v-for 지시어에서도 분할 대입 구문은 사용할 수 있다Reference
이 문제에 관하여(Vue.js의 v-for로 분할 할당), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/mascii/items/5bd09228640c857c4c04텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
