zoukankan      html  css  js  c++  java

  • Vue.js(二)---相关语法介绍第三部分

    2. vue中的按键修饰符，对回车键进行演示

      <!DOCTYPE html>
      <html>
          <head>
              <meta charset="utf-8">
              <title>vue中的按键修饰符</title>
              <script type="text/javascript" src="js/Vue.js"></script>
          </head>
          <body>
              <div id="app">
                  <input type="text" v-on:keydown.enter="fun1" />
              </div>
          </body>
          <script>
              new Vue({
                  el:'#app',
                  methods:{
                      fun1:function(){
                          alert("按下的是回车")
                      }
                  }
              });
          </script>
      </html>
      ​

       

    3. vue中v-for的使用

      <!DOCTYPE html>
      <html>
          <head>
              <meta charset="utf-8">
              <title>v-for遍历数组</title>
              <script type="text/javascript" src="js/Vue.js"></script>
          </head>
          <body>
              <div id="app">
                  <ul>
                      <li v-for="(item) in arr">{{item}}</li>
                  </ul>
              </div>
          </body>
          <script>
              new Vue({
                  el:'#app',
                  data:{
                      arr:[1,2,3,4,5]
                  }
              });
          </script>
      </html>
      ​
      <!DOCTYPE html>
      <html>
          <head>
              <meta charset="utf-8">
              <title>v-for遍历对象</title>
              <script type="text/javascript" src="js/Vue.js"></script>
          </head>
          <body>
              <div id="app">
                  <ul>
                      <li v-for="(key,value) in product">{{key}}={{value}}</li>
                  </ul>
              </div>
          </body>
          <script>
              new Vue({
                  el:'#app',
                  data:{
                      product:{
                          id:1,
                          name:"笔记本电脑",
                          price:5000
                      }
                  }
              });
          </script>
      </html>
      ​
      ​
      <!DOCTYPE html>
      <html>
          <head>
              <meta charset="utf-8">
              <title>v-for遍历对象</title>
              <script type="text/javascript" src="js/Vue.js"></script>
          </head>
          <body>
              <div id="app">
                  <table border="1">
                      <tr>
                          <td>序号</td>
                          <td>编号</td>
                          <td>名称</td> 
                          <td>价格</td>
                      </tr>
                      <tr v-for="(product,index) in products">
                          <td>{{index+1}}</td>
                          <td>{{product.id}}</td>
                          <td>{{product.name}}</td>
                          <td>{{product.price}}</td> 
                      </tr>
                  </table>
              </div>
          </body>
          <script>
              new Vue({
                  el:'#app',
                  data:{
                      products:[
                      {
                          id:1,
                          name:"笔记本电脑",
                          price:5000
                      },
                      {
                          id:2,
                          name:"智能手机",
                          price:4000
                      },
                      {
                          id:3,
                          name:"小米电视",
                          price:5899
                      },
                      
                      ]
                  }
              });
          </script>
      </html>
      ​

       

    4. vue中v-model的使用(可以从json格式数据中取值)

      <!DOCTYPE html>
      <html>
          <head>
              <meta charset="utf-8">
              <title>v-model</title>
              <script type="text/javascript" src="js/Vue.js"></script>
          </head>
          <body>
              <div id="app">
                   <form action="" method="post">
                      用户名：<input type="text" name="username" v-model="user.username" /><br />
                      密码：<input type="text" name="password" v-model="user.password" />
                  </form>
              </div>
          </body>
          <script>
              new Vue({
                  el:'#app',
                  data:{
                      user:{
                          username:"admin",
                          password:"admin"
                      }
                  }
              });
          </script>
      </html>
      ​

    5.  
  • 相关阅读:
    ThinkPHP 3 的CURD管理用户信息 修改和删除
    检测一个字符串是否为一个有效的编码格式字符串
    将Buffer对象结合创建为一个新的Buffer对象
    Buffer.byteLength(字符串,编码方式)计算指定字符串的字节数
    TypeError: Buffer.allocUnsafe is not a function
    多个haproxy 之间跳转
    TypeError: Identifier 'assert' has already been declared
    14.5.7 Storing InnoDB Undo Logs in Separate Tablespaces 存储InnoDB Undo logs 到单独的表空间
    14.5.5 Creating a File-Per-Table Tablespace Outside the Data Directory
    php session 管理
  • 原文地址：https://www.cnblogs.com/juddy/p/13289107.html
Copyright © 2011-2022 走看看