vue v-model 양식 제어 바인딩의 예제 튜토리얼
- Y2J원래의
- 2017-05-24 11:08:061939검색
이 글에서는 주로 vue v-model 양식 제어 바인딩 관련 정보를 자세히 소개하며, 이는 특정 참조 값이 있습니다. 관심 있는 친구는 양방향 데이터 바인딩 생성에서
v-model 명령을 참조할 수 있습니다. 양식 제어 요소에 대한 예는 아래에 설명되어 있습니다.
1. v-model 양방향 바인딩 텍스트
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<p id="app">
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
</p>
</body>
<script>
var vm = new Vue({
el:"#app",
data: {
message: '绑定文本'
}
})
</script>
</html>출력 결과:
2. - 모델은 위의 예와 유사하게 여러 줄의 텍스트를 양방향으로 바인딩합니다.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<p id="app">
<<span>Multiline message is:</span>
<p style="white-space: pre">{{ message }}</p>
<br>
<textarea v-model="message" placeholder="add multiple lines"></textarea>
</p>
</body>
<script>
var vm = new Vue({
el:"#app",
data: {
message: '绑定多行文本'
}
})
</script>
</html>출력 결과:
3. v-model 바인딩 확인란
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<p id="app">
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
</p>
</body>
<script>
var vm = new Vue({
el:"#app",
data: {
checked: 'true'
}
})
</script>
</html>출력 결과: 선택하면 true, 선택하지 않으면 false 🎜>
4. v-model 바인딩
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<p id="app">
<input type="checkbox" id="jack" value="刘二狗" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="张麻子" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="小狗子" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>
</p>
</body>
<script>
var vm = new Vue({
el:"#app",
data: {
checkedNames: []
}
})
</script>
</html>출력 결과:
5. v-model 바인딩드롭다운 목록
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<p id="app">
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>Picked: {{ picked }}</span>
</p>
</body>
<script>
var vm = new Vue({
el:"#app",
data: {
picked: ''
}
})
</script>
</html>출력 결과:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<p id="app">
<select v-model="selected">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{ selected }}</span>
</p>
</body>
<script>
var vm = new Vue({
el:"#app",
data: {
selected: ''
}
})
</script>
</html>출력 결과:
6. 동적 옵션, 렌더링에 v-사용:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<p id="app">
<select v-model="selected" multiple style="width: 50px">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<br>
<span>Selected: {{ selected }}</span>
</p>
</body>
<script>
var vm = new Vue({
el:"#app",
data: {
selected: []
}
})
</script>
</html>출력 결과:
[관련 권장 사항]
1. Javascript는 무료입니다. 동영상 튜토리얼
2.다단계 메뉴바의 JS 구현 코드 예시
3 .
Nodejs에서 일반적으로 사용되는 미들웨어 본문 파서의 자세한 예
4. JavaScript 양식 검증 구현 코드_javascript 기술
위 내용은 vue v-model 양식 제어 바인딩의 예제 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.