Vue 데이터 바인딩 방법: 1. 이중 중괄호 "{{}}"를 사용하여 페이지에 데이터를 제공합니다. 2. "v-model", "v-text", "v-html", "v - 3. 바인딩할 레이블 속성 앞에 ":"를 추가합니다. 4. 데이터 앞에 문자열을 연결하기 전에 "${}"를 사용합니다.
이 튜토리얼의 운영 환경: Windows 7 시스템, vue 버전 2.9.6, DELL G3 컴퓨터.
1. 이중 중괄호 '{{<strong><span style="font-size: 16px;">{}}</span></strong>’ 把数据给到页面
<template>
<div class="mainBody">
<h3>{{ msg }}</h3>
</div>
</template>
<script>
export default {
data(){
return{
msg:'月落乌啼霜满天',
}
}
}
</script>二、使用vue指令
<template>
<div class="mainBody">
<Input v-model="msg"/>
</div>
</template>
<script>
export default {
data(){
return{
msg:'月落乌啼霜满天'
}
}
}
</script>这边使用的是 v-model 将输入框的值与msg绑定 ，还可以是v-text v-html v-bind等
三、标签属性前加 ‘ ：’ 绑定
<template>
<div class="mainBody">
<CellGroup>
<Cell :title="msg"/>
</CellGroup>
</div>
</template>
<script>
export default {
data(){
return{
msg:'月落乌啼霜满天',
}
}
}
</script>
通过:title 将msg的值绑定到cell单元格的title，如果title属性前面忘记加‘ ：<img src="https://img.php.cn/upload/article/000/000/024/f2d23f70b75808296b393e6baab11700-Vue 데이터 바인딩의 여러 가지 방법은 무엇입니까?" alt="Vue 데이터 바인딩의 여러 가지 방법은 무엇입니까?"/><br/>{}}</p><p>를 사용하세요. /code><strong><span style="max-width:90%">' 페이지에 데이터를 제공합니다</span></strong></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;"><template>
<!-- 有时我们需要给要绑定的值拼接字符串，比如需要控制样式，拼接字符串时，那我们就需要这样写`${}`， -->
<div class="mainBody">
<CellGroup>
<Cell :title="msg"/>
<!-- 将‘江枫渔火对愁眠’单元格 的背景色绑定到 color:&#39;aqua&#39; -->
<Cell title=&#39;江枫渔火对愁眠&#39; :style="`background-color: ${color}`"/>
<!-- 将‘江枫渔火对愁眠’拼接在msg：&#39;月落乌啼霜满天&#39;后-->
<Cell :title="`${msg}，江枫渔火对愁眠`" />
</CellGroup>
</div>
</template>
<script>
export default {
data(){
return{
msg:&#39;月落乌啼霜满天&#39;,
color:&#39;aqua&#39;
}
}
}
</script></pre><div class="contentsignin">로그인 후 복사</div></div><p><img src="https://img.php.cn/upload/image/954/182/906/164058541146980Vue%20%EB%8D%B0%EC%9D%B4%ED%84%B0%20%EB%B0%94%EC%9D%B8%EB%94%A9%EC%9D%98%20%EC%97%AC%EB%9F%AC%20%EA%B0%80%EC%A7%80%20%EB%B0%A9%EB%B2%95%EC%9D%80%20%EB%AC%B4%EC%97%87%EC%9E%85%EB%8B%88%EA%B9%8C?" title="1640585411469803 .png" alt="Vue 데이터 바인딩의 여러 가지 방법은 무엇입니까?"><img src="https://img.php.cn/upload/image/295/948/331/1640585463271279.png" title="1640585463271279.png" alt="Vue 데이터 바인딩의 여러 가지 방법은 무엇입니까?"></p>
<p><a href="https://www.php.cn/vuejs/" target="_blank">2. vue 명령을 사용하세요</a></p>🎜rrreee🎜여기서 v-model을 사용하여 입력 상자의 값을 msg 또는 v-text에 바인딩합니다. v- html v-bind 등 🎜🎜<img src="https://img.php.cn/upload/image/208/533/767/1640585416244806.png" title="1640585416244806.png" alt="2. png">🎜🎜🎜🎜3. 바인딩하려면 라벨 속성 앞에 ':'를 추가하세요 🎜🎜🎜rrreee🎜<img src="https://img.php.cn/upload/image/316/593/562/%201640585457259230%20.png" title="1640585457259230.png" alt="Vue 데이터 바인딩의 여러 가지 방법은 무엇입니까?">🎜🎜msg 값을 제목을 통해 셀 제목에 바인딩합니다. '<code>: 추가하는 것을 잊은 경우 code>', 페이지 표시는 다음과 같습니다: 🎜🎜🎜 title에 제공된 값은 data()의 변수 msg가 아니라 문자열 "msg"입니다. 🎜🎜🎜🎜 4. 데이터 `${} 앞에 문자열 접합을 사용합니다. `🎜🎜🎜rrreee🎜🎜🎜🎜[관련 추천: "🎜vue.js tutorial🎜"]🎜
위 내용은 Vue 데이터 바인딩의 여러 가지 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
