for vue 一行2列_（Vue起步）2.模板指令：v-for / v-on / v-model

Jack遇见冰山

于 2020-12-30 22:00:34 发布

阅读量556

点赞数

文章标签： for vue 一行2列

本文链接：https://blog.csdn.net/weixin_35511854/article/details/112181360

版权

本文介绍了如何使用Vue.js的模板指令v-for进行数据循环，v-on绑定事件，以及v-model实现数据双向绑定。通过实例详细讲解了如何在Vue应用中动态添加列表项、处理点击事件、显示输入内容以及自动清空输入框。

摘要由CSDN通过智能技术生成

①公众号：王酱酱记
②记录跟着文档学习Vue的一些关键点，持续更新。感兴趣的小白建议关注一下
③Vue当中有几个常见的指令，看看是怎么用的，强烈建议你自己在编辑器里打一遍，你就更明白Vue为什么是数据驱动型的一款框架啦！

关键词：v-for、 v-on 、v-model
实现需求：循环数据、绑定事件、数据的双向绑定
了解：Vue.js 设计思想、Vue.js 的基础语法
注意：v-on:click 用 @click代替

一、实现通过 input 框向“正在进行”的列表中增加列表项内容

使用：v-for 帮助去循环多行数据

//创建一个Vue实例，加上对应的 el 和 data 数据
//在dom元素加上vue的一个指令 v-for 用于循环多列数据

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>TodoList</title>
  <script src='./vue.js'></script>
</head>
<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: ['第一课内容' , '第二课内容' , '33333

最低0.47元/天解锁文章

Jack遇见冰山

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
for vue 一行2列_（Vue起步）2.模板指令：v-for / v-on / v-model

①公众号：王酱酱记②记录跟着文档学习Vue的一些关键点，持续更新。感兴趣的小白建议关注一下③Vue当中有几个常见的指令，看看是怎么用的，强烈建议你自己在编辑器里打一遍，你就更明白Vue为什么是数据驱动型的一款框架啦！关键词：v-for、 v-on 、v-model实现需求：循环数据、绑定事件、数据的双向绑定了解：Vue.js 设计思想、Vue.js 的基础语法注意：v-on:click 用 ...
复制链接

扫一扫