跟着文档学Vue（二）

逃离我推掉我的手 2022-05-27 11:44 180阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>vue基础2</title>
      <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <style>
    </style>
    <body>
      <div id="app">
        
        <div v-if="testIf">我是根据v-if来显示的</div>
        <div v-else>若v-if为false的话我就出现了</div>
        <template v-if="testIf1">
          <h1>Title</h1>
          <p>Paragraph 1</p>
          <p>Paragraph 2</p>
        </template>
        
        <template v-if="loginType === 'username'">
          <label>Username</label>
          <input placeholder="Enter your username" key="username-input">
        </template>
        <template v-else>
          <label>Email</label>
          <input placeholder="Enter your email address" key="email-input">
        </template>
        <button @click="changeLoginType">切换登录方式</button>
        
    
        
    
        
        
        <ul>
          
          <li v-for="item in nameList" :key = "item.id">{
       {item.name}}</li>
          
        </ul>
        <button @click="changeItem">改变nameList</button>
        
        <ul>
          <li v-for="(value, key, index) in nameDetail" :key = "index">{
       {index}}. {
       {key}}: {
       {value}}</li>
        </ul>
        <div>
          <span v-for="n in evenNumbers">{
       {n}}</span>
        </div>
        
        <div>
          <span v-for="n in 10">{
       {n}}</span> 
        </div>
        
        <ul>
          <li v-for="item in nameList" v-if="item.id==2">{
       {item.name}}</li>
        </ul>
        
      </div>
      
      <script>
        var data = {
          testIf: true,
          testIf1: true,
          loginType: 'username',
          // 可以对数组使用push(),pop(),splice(),shift(),unshift(),sort(),reverse等
          // 注意：不能利用索引直接设置一个项，eg: item[1] = newValue;不是响应式的
          // 当你修改数组的长度时，例如：vm.items.length = newLength也不是响应式的
          nameList: [
            { id: 1, name: 'Li Ming' },
            { id: 2, name: 'Zhang San' },
            { id: 3, name: 'Li Si' }
          ],
          // 对象更改检测
          nameDetail: {
            name: 'Liu Hong',
            age: 25,
            birthday: '1994-11-30'
          },
          numbers: [1,2,3,4,5]
        };
        var app = new Vue({
          el: '#app',
          data,
          methods: {
            changeLoginType: function() {
              this.loginType = this.loginType == 'username' ? 'email' : 'username'
              return this.loginType;
            },
            //利用索引值更改一个项时 Vue.set || app.$set, index不能超过原有数组index+1的最大值，如本例子将2改为4就会报错
            changeItem: function() {
              app.$set(data.nameList, 2, { 'id': 4, 'name': "李明" });
              // app.$set(this.nameDetail, 'sex', '女');  //与下面结果相同
              // 下面两种结果相同，区别是是什么？？？？？？？？？为什么Vue建议使用第一种，为已有对象赋予新属性，如果想要添加新的响应式属性。
              this.nameDetail = Object.assign({}, this.nameDetail, {
                sex: '女'
              });
              // this.nameDetail = Object.assign(this.nameDetail, {
              //   sex: '女'
              // });
            }
          },
          computed: {
            // 显示过滤、排序结果
            // 我们想要显示一个数组的过滤或排序副本，而不实际改变或重置原始数据。在这种情况下，可以创建返回过滤或排序数组的计算属性。
            evenNumbers: function () {
              return this.numbers.filter(function (number) {
                return number % 2 === 0
              })
            }
          }
        });
      </script>
    </body>
    </html>