v-for:

<div id = "app"><ul><li v-for="item in list">{{item}}</li></ul> </div> <script>let app = new Vue({el:'#app',data:{list:['B','A','T']}}) </script>

拿到索引index:

<div id="app"><ul><li v-for="(item,index) in list">{{index}}.{{item}}</li></ul> </div> <script>let app = new Vue({el:'#app',data:{list:['B','A','T']}}); </script>

v-on:

// 和methods一起用 <div id="app"><button v-on:click="say">說hello</button> </div> <script>let app = new Vue({el:'#app',methods:{say(){alert('Hello Vue!');}}}); </script>

傳遞參數給say

<div id = "app"><input v-model ="name"><button v-on:click="say(name)">輸入后打個招呼吧</button> </div> <script>let app = new Vue({el:'#app',methods:{say(name){alert('Hello ' + name);}}}); </script>

v-model:

// 上面其實用到了v-model. 將input的輸入和v-model中指定的元素綁定.數據變化更新視圖..MVVC模式 <div id = 'app'><input type= "text" v-model="msg" ><p>您輸入了: {{msg}}</p> </div> <script>let app = new Vue({el:'#app',data:{msg:'',}}); </script>

v-once:

// 顧名思義,只渲染一次 <div id="app"><input type="text" v-model="msg"><p v-once>{{msg}}</p> </div> <script>let app = new Vue({el:'#app',data:{msg:'你的征途是星辰大海'}}); </script> // 無論怎么改變input框的內容,下面的初始話都不改變

參考 https://mp.weixin.qq.com/s?__biz=MzA3MDg1NzQyNA==&mid=2649654475&idx=1&sn=3ef46ab357a1b8380be2d8e4b6669c53&chksm=872c4374b05bca627354bd6b36406feb20d0454823b50dded470f9d939f24ee72acba9bf0615&scene=21#wechat_redirect

總結

以上是生活随笔為你收集整理的vue --- v-for、v-on、v-model、v-once的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。