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.  
  • 相关阅读:
    c#读sql server数据添加到MySQL数据库
    ASP.NET取得Request URL的各个部分
    jquery,attr,prop,checkbox标签已有checked=checked但是不显示勾选
    ASP.NET 4.0 ：MasterPage母版页的ClientIDMode属性
    百度地图 根据坐标，获取省份，城市，区域
    ECharts
    SQL 更新修改删除一个表，库存自动增减的写法
    ajaxFileupload 多文件上传
    JSON C# Class Generator ---由json字符串生成C#实体类的工具
    mvc 部署到iis 提示错误未能加载文件或程序集System.Web.Http.WebHost
  • 原文地址：https://www.cnblogs.com/juddy/p/13289107.html
Copyright © 2011-2022 走看看