Vue.js实现输入框绑定的实例代码

实现效果如下：

实现代码及注释

  
  
  
  
    
    [v-cloak]{
      display: none;
    }
    *{
      padding: 0;
      margin: 0;
    }
    body{
      font: 15px/1.3 'Open Sans', sans-serif;
      color: #5e5b64;
      text-align: center;
    }
    a, a:visited{
      outline: none;
      color: #389dc1;
    }
    a:hover{
      text-decoration: none;
    }
    section,footer,header,aside,nav{
      display: block;
    }
    
    .tooltip{
      background-color: #03c03c;
      background-image: -webkit-linear-gradient(top, #03c03c, gray);
      background-image: -moz-linear-gradient(top,#03c03c, gray);
      background-image: linear-gradient(top, #03c03c, gray);
      box-shadow: 0 1px 1px #ccc;
      border-radius: 3px;
      width: 290px;
      padding: 10px;
      position: absolute;
      left: 50%;
      margin-left: -150px;
      top: 50px;
    }
    
    .tooltip:after{
      content: "";
      position: absolute;
      border: 6px solid #03c03c;
      border-color: #03c03c transparent transparent;
      width: 0;
      height: 0;
      bottom: -12px;
      left: 50%;
      margin-left: -6px;
    }
    .tooltip input{
      border: none;
      width: 100%;
      line-height: 34px;
      border-radius: 3px;
      box-shadow: 0 2px 6px #bbb inset;
      text-align: center;
      font-size: 16px;
      font-family: inherit;
      color: #8d9395;
      font-weight: bold;
      outline: none;
    }
    p{
      font-size: 22px;
      font-weight: bold;
      color: #6d8088;
      height: 30px;
      cursor: pointer;
    }
    p b{
      color: #fff;
      display: inline-block;
      padding: 5px 10px;
      background-color: #c4d7e0;
      border-radius: 2px;
      text-transform: uppercase;
      font-size: 18px;
    }
    p:before{
      content:"✎";
      display: inline-block;
      margin-right: 5px;
      font-weight: normal;
      vertical-align: text-bottom;
    }
    #main{
      height: 300px;
      position: relative;
      padding-top: 150px;
    }
  





  
  
    
    
  
  
  
  
{{text_content}}

总结

以上所述是小编给大家介绍的Vue.js实现输入框绑定的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对考高分网网站的支持！