zoukankan      html  css  js  c++  java
  • vue学前班004(基础指令与使用技巧)

        我学vue 的最终目的是为了 做apicloud 和vue 的开发  作为配合apicloud的前端框架使用 所以项目用不到的会暂时不介绍、

       (强烈建议  官网案例走一遍)

       基础指令的学习(结合aui)

          v-mode   等结合开发登陆页面

               实现按钮变色 

    <!doctype html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
        <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
        <link rel="stylesheet" type="text/css" href="./css/aui.css" />
         <title> ----     v-if       v-bind    </title>
        <style type="text/css">
            /**/
        </style>
    </head>
    <body>
       <div  id="app" >
    
                 <div class="aui-content aui-margin-b-15">
                   <ul class="aui-list aui-select-list">
                        <li  class="aui-list-item">
                              <div class="aui-list-item-inner">
                                   <div class="sui-list-item-input">
                                         <input type="number"  placeholder="手机号" v-model="moblie">
                                   </div>
                              </div>
                        </li>
                         <li  class="aui-list-item">
                              <div class="aui-list-item-inner">
                                   <div class="sui-list-item-input">
                                         <input type="number"  placeholder="请输入您的密码"  v-model="password" >
                                   </div>
                              </div>
                        </li>
                      
                   </ul>
               </div>
                
               <div class="aui-content-padded  aui-margin-t-15">
    
                        <!-- 001 v-if 指令  为真走一条   为假  走另外一条    if  else -->
    
                     <!--   <div class=" aui-btn aui-btn-block  aui-btn-info "  v-if="moblie&&password" >登陆</div>
                       <div class=" aui-btn aui-btn-block"  v-else  >登陆</div> -->
                     
                      <!-- 方式2  v-bind       手机为真 就追加类名    && 同时追加2个 案例  -->
                      <div class=" aui-btn aui-btn-block"  v-bind:class="{'aui-btn-info':moblie&&password}"  >登陆</div>
    
                       <div class="aui-pull-left">
                             <a href="aui-text-info">忘记密码</a>
                       </div>
                       <div class="aui-pull-right">
                             <p href="color">免费注册</p>
                       </div>
               </div>
       </div>
    </body>
      <script type="text/javascript" src="./script/api.js"></script>
      <script type="text/javascript" src="./script/vue.js" ></script>   
      <script>
    
      //  v-model    声明对象      初始化给默认值 给一个空
         
          var vm= new  Vue({
              el:'#app',
              data:{
                 moblie:'',
                 password:''
              },
          });
     </script>
    </html>
    

      

      

  • 相关阅读:
    Centos 6.9 安装 Redis 3.2.9
    CentOS下安装JDK的三种方法
    centos6.9(Linux系统)安装VMware tools教程
    VMWare安装Centos 6.9
    关于缓存中Cookie,Session,Cache的使用
    MVC控制器获取@Html.DropDownList值
    .net下的跨域问题
    IIS无法加载字体文件(*.woff,*.svg)的解决办法
    jQuery .attr("checked")得undefined 问题解决
    Apache和IIS服务器共存问题来自网上内容
  • 原文地址:https://www.cnblogs.com/ysshuai/p/7094304.html
Copyright © 2011-2022 走看看