vue로 데이터를 바인딩하는 방법: 1. 이중 중괄호 "{{}}"를 사용하여 페이지에 데이터를 제공합니다. 2. vue 명령어를 사용하면 단방향 데이터 바인딩이 가능합니다. 모델 명령어는 양방향 데이터 바인딩을 실현할 수 있습니다. 3. ":"를 사용하고 바인딩을 위해 레이블 속성 앞에 ":"를 추가하면 됩니다. 4. "${}"를 사용하고 데이터 앞에 "${"를 사용하여 문자열을 연결하면 됩니다. }".
이 튜토리얼의 운영 환경: windows7 시스템, vue3 버전, DELL G3 컴퓨터.
1. 이중 중괄호 '{{}}'를 사용하여 페이지에 데이터를 제공합니다.
<template> <div> <h3>{{ msg }}</h3> </div></template><script>export default { data(){ return{ msg:'月落乌啼霜满天', }}}</script>
<template> <div> <input> </div></template><script>export default { data(){ return{ msg:'月落乌啼霜满天' }}}</script>
여기서는 v-model을 사용하여 입력 상자의 값을 msg 또는 v-text v-html v-bind 등에 바인딩합니다.
1. 바인딩 정의(v-bind): 데이터는 데이터에서 페이지로만 흐를 수 있습니다(단방향 전송)
2. 양방향 데이터 바인딩(v-model): 데이터는 데이터에서 페이지로 흐를 뿐만 아니라, 또한 페이지에서 데이터까지
(1) 양방향 데이터 바인딩은 일반적으로 양식 요소(예: 입력 선택 확인란 등)에 적용됩니다.
(2) v-model:value는 v-model로 축약될 수 있습니다. -model은 기본적으로 값을 수집합니다
<template> <div> <cellgroup> <cell></cell> </cellgroup> </div></template><script>export default { data(){ return{ msg:'月落乌啼霜满天', }}}</script>
msg 값을 셀 제목에 바인딩합니다. 제목 속성 앞에 ':'을 추가하는 것을 잊어버리세요. 페이지는 다음과 같이 표시됩니다:
title에 제공된 값은 data()의 msg 변수가 아니라 "msg" 문자열입니다.
<template><!-- 有时我们需要给要绑定的值拼接字符串,比如需要控制样式,拼接字符串时,那我们就需要这样写`${}`, --> <div> <cellgroup> <cell></cell> <!-- 将‘江枫渔火对愁眠’单元格 的背景色绑定到 color:'aqua' --> <cell></cell> <!-- 将‘江枫渔火对愁眠’拼接在msg:'月落乌啼霜满天'后--> <cell></cell> </cellgroup> </div></template><script>export default { data(){ return{ msg:'月落乌啼霜满天', color:'aqua' }}}</script>
【관련 권장 사항: vuejs 비디오 튜토리얼, 웹 프론트 엔드 개발】
위 내용은 vue는 어떤 바인딩 데이터를 사용하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!