• 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.  
  • 相关阅读:
    第七章习题G题
    第二周习题O题
    P4735 最大异或和
    P3008 [USACO11JAN]道路和飞机Roads and Planes
    P4009 汽车加油行驶问题
    P1073 最优贸易
    P2260 [清华集训2012]模积和
    P2865 [USACO06NOV]路障Roadblocks
    P1821 [USACO07FEB]银牛派对Silver Cow Party
    P4180 【模板】严格次小生成树[BJWC2010]
  • 原文地址：https://www.cnblogs.com/juddy/p/13289107.html
Copyright © 2020-2023  润新知