vuejs 학습노트 v-model v-on v-bind 컴퓨터 vue 삼목 연산자
12843 단어 vuejs
span style="color:#e8de50;">html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="./css/bootstrap.min.css">
<title>Titletitle>
head>
<style>
.complete{
color: #00a65a;
text-decoration: line-through;
}
style>
<body>
<div class="container" id ='app'>
<div class='row'>
<div class="panel">
<div class="panel-heading">
VUEJS {{ arrCount }}
div>
<div class="panel-body">
<h1>
{{ message }}
h1>
<input type="text" class="form-control" v-model="message">
<ul class="list-group">
<li class="list-group-item" v-bind:class="{'complete':arrs.complete}"
v-for="(arrs,index) in arr">
{{ arrs.title }}
<button class="btn btn-warning btn-xs pull-right" v-on:click="deleteArr(index)">
delete
button>
<button class="btn btn-xs pull-right" v-bind:class="[arrs.complete ? 'btn-success':'btn-danger']" v-on:click="onsComplete(arrs)">
{{ arrs.complete? 'complete':'off' }}
button>
li>
ul>
<form action="" v-on:submit.prevent = 'addArr(newArr)'>
<div class="form-group">
<input type="text" class="form-control" v-model="newArr.title" placeholder="title">
div>
<div class="form-group">
<button class="btn btn-success">add arrbutton>
div>
form>
div>
div>
div>
div>
body>
<script src="js/vue.js">script>
<script>
new Vue({
el:'#app',
data:{
message:'hello word',
arr:[
{id:1,title:'trc',age:'20',complete:false}
],
newArr: {id:null,title:'',age:null,complete:false}
},
computed:{
arrCount:function(){
return this.arr.length
}
},
methods:{
addArr:function(newArr){
this.arr.push(newArr);
this.newArr = {id:null,title:'',age:null};
},
deleteArr:function(index){
console.log(index);
this.arr.splice(index,1);
},
onsComplete:function(arrs){
arrs.complete = ! arrs.complete;
}
}
});
script>
html>이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Vue.js + Google Places: 여러 입력 필드 자동 완성경우에 따라 두 개 이상의 입력 필드에 장소 자동 완성 기능을 추가할 수 있습니다. 일반적인 예는 두 위치 사이의 이동 거리를 찾는 것입니다. 이 경우 사용자는 자동 완성 기능이 활성화된 두 개의 입력 필드를 갖게 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
