vue3 学习-初识体验-常见指令v-for和v-model

2022-08-22 23:30:51 阅读：241 来源： 互联网

标签：vue dom 指令 list 初识 inputValue vue3 model

继续通过小案例来体验一些常用的指令, 以经典的todolist进行展示. 首先呢通过 v-for 指令进行dom循环.

v-for

通常是在循环dom的编写的同时遍历数据进行填充.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Document</title>
  <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
  <div id="root"></div>
  <script>
    Vue.createApp({
      data () {
        return { 
          list: ['hello', 'world', 'vue', 'react'] 
        }
      },
      template: `
        <ul>
          <li v-for="(item, index) of list">{{item}} {{index}}</li>
        </ul>
        `
    }).mount('#root')
  </script>
</body>
</html>

则显示结果如下:

* hello 0
* world 1
* vue 2
* react 3

v-model

用来对输入框的值和数据进行双向绑定 (共用一个数据)

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Document</title>
  <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
  <div id="root"></div>
  <script>
    Vue.createApp({
      data () {
        return { 
          inputValue: '',
          list: [] 
        }
      },
      methods: {
        addItem () {
          this.list.push(this.inputValue)
          this.inputValue = ''
        }
      },
      template: `
      <div>
        <input v-model="inputValue" />
        <button @click="addItem">增加</button>
        <ul>
          <li v-for="(item, index) of list">{{item}} {{index}}</li>
        </ul>
      </div>
        `
    }).mount('#root')
  </script>
</body>
</html>

对于 v-for 的使用是极高频的, 但其实只需要了解其语法就可以了, 仅从工具使用的角度; 对于 v-model 同理, 理解输入框的值和数据用的值都用一个 inputValue 变量进行双向绑定, 或者说共享吧.这个特别高效. 以前用原生 js 来弄还是比较麻烦的, 又要处理 dom 又要处理数据. 通过 vue 这种工具就极大降低了开发的难度, 而且还特别好用.

标签：vue,dom,指令,list,初识,inputValue,vue3,model
来源： https://www.cnblogs.com/chenjieyouge/p/16614656.html

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

ICode9

vue3 学习-初识体验-常见指令v-for和v-model