开发TodoList(v-model,v-for,v-on)

2019-12-17 14:01:13 阅读：259 来源： 互联网

标签：Vue TodoList app list item 开发 inputValue model data

1.v-for

for循环：v-for="item in list"中的item 为list中的每一项，类似for in 循环

<body>
   <div id="app">
       <input type="text"/>
       <button>提交</button>
       <ul>
           <li v-for="item in list">{{item}}</li>
       </ul>
   </div>
 
   <script>
       var app = new Vue({
           el: '#app',
           data: {
               list: ['第一课的内容', '第二课的内容','第三课的内容']
           }
       })
   </script>
</body>

2.v-on

为元素绑定事件

<body>
   <div id="app">
       <input type="text"/>
       <button v-on:click="handleBtnClick">提交</button>
       <ul>
           <li v-for="item in list">{{item}}</li>
       </ul>
   </div>
 
   <script>
       var app = new Vue({
           el: '#app',
           data: {
               list: []
           },
           methods: {
            handleBtnClick: function(){
                alert('click')
            }
           }
       })
   </script>
</body>

3.v-model

Vue实例中data中的数据与元素的数据实现双向绑定。

验证如下：

1）input框输入123333，可以得到在data中的inputValue与Input框中相同的值

2）控制台改变data中inputValue值，可以得到input框中相同的值：

总结：Vue实例中data中的数据与元素的数据实现双向绑定。

<body>
   <div id="app">
       <input type="text" v-model="inputValue"/>
       <button v-on:click="handleBtnClick">提交</button>
       <ul>
           <li v-for="item in list">{{item}}</li>
       </ul>
   </div>
 
   <script>
       var app = new Vue({
           el: '#app',
           data: {
               list: [],
               inputValue: ''
           },
           methods: {
            handleBtnClick: function(){
                alert(this.inputValue)
            }
           }
       })
   </script>
</body>

初始list为空，input框输入内容，点击button按钮，生成li标签,往list里添数据

通过往data里面加入input写入的值，再由于双向绑定，输出data里的list值，当data发生变化，页面就会变化。

<body>
   <div id="app">
       <input type="text" v-model="inputValue"/>
       <button v-on:click="handleBtnClick">提交</button>
       <ul>
           <li v-for="item in list">{{item}}</li>
       </ul>
   </div>
 
   <script>
       var app = new Vue({
           el: '#app',
           data: {
               list: [],
               inputValue: ''
           },
           methods: {
            handleBtnClick: function(){
               this.list.push(this.inputValue)
            }
           }
       })
   </script>
</body>

提交之后把input框清空

<body>
   <div id="app">
       <input type="text" v-model="inputValue"/>
       <button v-on:click="handleBtnClick">提交</button>
       <ul>
           <li v-for="item in list">{{item}}</li>
       </ul>
   </div>
 
   <script>
       var app = new Vue({
           el: '#app',
           data: {
               list: [],
               inputValue: ''
           },
           methods: {
            handleBtnClick: function(){
               this.list.push(this.inputValue)
               this.inputValue = ''
            }
           }
       })
   </script>
</body>

MVVM模式，不操作dom，只通过修改数据来改变页面。

标签：Vue,TodoList,app,list,item,开发,inputValue,model,data
来源： https://www.cnblogs.com/tengteng0520/p/12054174.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

开发TodoList(v-model,v-for,v-on)