Vue的入门——基本语法（中）

(三) 循环

通过 v-for 就可以进行循环遍历

<body>
    
    <div id="hello-4">
        <li v-for="student in students">
          {{student.name}}
        </li>
      </div>
      
      <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
      <script>
          var vm = new Vue({
              el: "#hello-4",
              data: {
                  students: [{name: '张三'}, {name: '李四'}, {name: '王五'}]
              }
          })
      </script>
</body>

效果如下：

在控制台 push 一个新的，同样会更新出来：

说明：这里演示的只是最基本的一种情况，很多时候，若遍历的数组中为对象，且对象有多个值，例如含有 id 这样的值，一般会将这种唯一的 id 值作为 key 值，例如：

<div v-for="item in items" v-bind:key="item.id">
  <!-- 内容 -->
</div>

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key attribute：

建议尽可能在使用 v-for 时提供 key attribute，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。

(四) 事件绑定

经常我们需要通过点击一些按钮或者标签组件等，使得用户可以与应用进行交互，也就是进行事件绑定，在 Vue 中我们可以通过 v-on 指令添加一个事件监听器来进行

注：使用 v-on 引入约束

<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">

代码如下：

<div id="hello-5">
  <button v-on:click="helloWorld">你好</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script>
    var vm = new Vue({
        el: "#hello-5",
        data: {
            content: "Hello World ！"
        },
        methods: {
            helloWorld: function () {
                alert(this.content);
            }
        }
    })
</script>

可以看到，通过 v-on:click 就将 helloWorld 这个事件绑定了，而事件的具体逻辑需要定义在 Vue 对象的 methods 中

(五) 双向绑定

当数据发生变化时，视图也变化，而当视图发生变化的时候，数据也跟着变化

前半句，即修改 data 中的数据，从而引起视图中的变化，我们这里就重点提一下后半句

首先，Vue 提供了 v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定

从常见的表单中的几种形式来讲，我们可以使用 v-model 指令在表单的 input 、textarea>、select 等上进行数据的双向绑定，它可以根据控件类型选取正确的方法来更新元素

不过使用 v-model 指令后会忽略表单原先的 value、checked、selected 等的初始值，而总将 Vue 实例中的数据最为数据源

input 中 ，输入文本

<div id="hello-6">
  输入: <input type="text" v-model="content" > 输出: {{content}}
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script>
    var vm = new Vue({
        el: "#hello-6",
        data: {
            content: "Hello World ！"
        },
    })
</script>

在输出的位置使用两组大括号进行 content 这个值的回显我们之前就已经能做到了，而我们在 input 的属性中使用 v-model 进行对于 content 的绑定，这样就可以使得输入框中输入的值可以直接影响 data 中 content 的值，即随着你 input 中输入值的修改，随之输出位置的内容也会变化

 

input 中 ，单选框

<div id="hello-6">
  性别:
  <input type="radio" name="gender" value="男" v-model="gender">男
  <input type="radio" name="gender" value="女" v-model="gender">女
  输出: {{gender}}
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script>
    var vm = new Vue({
        el: "#hello-6",
        data: {
            gender: '男'
        },
    })
</script>

 

select 中

<div id="hello-6">
  <select v-model="choose">
    <option value="" disabled>---请选择---</option>
    <option>A-苹果</option>
    <option>B-樱桃</option>
    <option>C-西瓜</option>
  </select>
  输出: {{choose}}
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script>
    var vm = new Vue({
        el: "#hello-6",
        data: {
            choose: ''
        },
    })
</script>

 

posted @ 2022-05-08 12:02  四水呐  阅读(66)  评论(0)    收藏  举报