Vue를 사용하여 동적 입력을 만드는 방법
12598 단어 codenewbieprogrammingvuejavascript
이 블로그에서는 vuejs를 사용하여 동적 입력을 만드는 방법을 보여드리겠습니다.
먼저 컴포넌트를 생성하고 이름을
DynamicInput.vue
로 지정하고 아래 코드를 추가합니다.<template>
<div class="hello">
<h1>{{ msg }}</h1>
<div class="w-full mt-4 p-10">
<button
type="button"
class="flex justify-start ml-2 rounded-md border px-3 py-2 bg-pink-600 text-white"
@click="addMore()"
>
Add More
</button>
<div v-for="(course, index) in courses" :key="index">
<div class="flex justify-start ml-2 mt-4">
<input
v-model="course.courseName"
placeholder="enter you course name"
class="w-full py-2 border border-indigo-500 rounded"
/>
<button
type="button"
class="ml-2 rounded-md border px-3 py-2 bg-red-600 text-white"
@click="remove(index)"
v-show="index != 0"
>
Remove
</button>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "HelloWorld",
props: {
msg: String,
},
data() {
return {
courses: [
{
courseName: "",
},
],
};
},
methods: {
addMore() {
this.courses.push({
courseName: "",
});
},
remove(index) {
this.courses.splice(index, 1);
},
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
이제 이 구성 요소를 아래와 같이
App.vue
파일에 추가합니다.<template>
<div id="app">
<DynamicInput msg="Example of Dynamic Input" />
</div>
</template>
<script>
import DynamicInput from "./components/DynamicInput";
export default {
name: "App",
components: {
DynamicInput,
},
};
</script>
<style>
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
스타일링에 tailwind CSS를 설치했습니다. 설치해야합니다.
내 게시물이 마음에 들면 나를 팔로우하여 더 많은 블로그 게시물을 얻으십시오.
[삭제 된 사용자]
자세한 내용은 아래 코드샌드박스를 참조하세요.
행복한 독서. 🦄 ❤️
Reference
이 문제에 관하여(Vue를 사용하여 동적 입력을 만드는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/snehalkadwe/how-to-create-dynamic-input-using-vue-2hf7텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)