Vue模板語法中如何實(shí)現(xiàn)數(shù)據(jù)綁定-創(chuàng)新互聯(lián)

這篇文章主要為大家展示了“Vue模板語法中如何實(shí)現(xiàn)數(shù)據(jù)綁定”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“Vue模板語法中如何實(shí)現(xiàn)數(shù)據(jù)綁定”這篇文章吧。

在徽縣等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強(qiáng)發(fā)展的系統(tǒng)性、市場前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供成都做網(wǎng)站、網(wǎng)站制作網(wǎng)站設(shè)計(jì)制作按需求定制網(wǎng)站,公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),成都品牌網(wǎng)站建設(shè),營銷型網(wǎng)站,外貿(mào)營銷網(wǎng)站建設(shè),徽縣網(wǎng)站建設(shè)費(fèi)用合理。

1.單項(xiàng)數(shù)據(jù)綁定

<div id="di">
<input type="text" :value="input_val">
</div>

<script>
var app = new Vue({
el: '#di',
data: {
input_val: 'hello world '
}
})
</script>

通過瀏覽器 REPL 環(huán)境可以進(jìn)行修改 app.input_val = 'Vue'

我們通過 vue 對象修改數(shù)據(jù)可以直接影響到 DOM 元素，但是，如果直接修改 DOM 元素，卻不會影響到 vue 對象的數(shù)據(jù)；我們把這種現(xiàn)象稱為單向數(shù)據(jù)綁定；

2.雙向數(shù)據(jù)綁定v-model：

<div id="di">
 <input type="text" v-model="input_val" >
</div>

<script>
 var app = new Vue({
  el: '#di',
  data: {
   input_val: 'hello world '
  }
 })
</script>

通過 v-model 指令展示表單數(shù)據(jù)，此時(shí)就完成了雙向數(shù)據(jù)綁定；

不管 DOM 元素還是 vue 對象，數(shù)據(jù)的改變都會影響到另一個(gè)；

2.1雙向數(shù)據(jù)綁定的應(yīng)用范圍：

文本框 & 文本域

<div id="di">
 <textarea v-model="inp_val"></textarea>
 <div>{{ inp_val }}</div>
</div>

<script>
 var app = new Vue({
  el: '#di',
  data: {
   inp_val: ''
  }
 })
</script>

綁定復(fù)選框

<div id="di">
 吃飯：<input type="checkbox" value="eat" v-model="checklist"><br>
 睡覺：<input type="checkbox" value="sleep" v-model="checklist"><br>
 {{ checklist }}
</div>

<script>
 var vm = new Vue({
  el: '#di',
  data: { checklist: []
  }
 });
</script>

綁定單選框

<div id="ap">
 男<input type="radio" name="sex" value="男" v-model="sex">
 女<input type="radio" name="sex" value="女" v-model="sex"> 
 <br>
 {{sex}}
</div>

<script>
 var vm = new Vue({
  el: '#ap',
  data: {
   sex: ''
  }
 });
</script>

以上是“Vue模板語法中如何實(shí)現(xiàn)數(shù)據(jù)綁定”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

當(dāng)前文章：Vue模板語法中如何實(shí)現(xiàn)數(shù)據(jù)綁定-創(chuàng)新互聯(lián)
URL鏈接：http://muchs.cn/article0/dhoooo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、商城網(wǎng)站、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站制作、網(wǎng)站導(dǎo)航、外貿(mào)建站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容