zoukankan      html  css  js  c++  java
  • vue_表单

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Vue 测试实例 </title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    </head>
    <body>
    <div id="app">
      <p>input 元素:</p>
      <input v-model="message" placeholder="编辑我……">
      <p>消息是: {{ message }}</p>
        
      <p>textarea 元素:</p>
      <p style="white-space: pre">{{ message2 }}</p>
      <textarea v-model="message2" placeholder="多行文本输入……"></textarea>
    </div>
    ​
    <script>
    new Vue({
      el: '#app',
      data: {
        message: 'Runoob',
        message2: '菜鸟教程\r\nhttp://www.runoob.com'
      }
    })
    </script>
    </body>
    </html>
    

     复选框 

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Vue 测试实例 </title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    </head>
    <body>
    <div id="app">
      <p>单个复选框:</p>
      <input type="checkbox" id="checkbox" v-model="checked">
      <label for="checkbox">{{ checked }}</label>
    	
      <p>多个复选框:</p>
      <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
      <label for="runoob">Runoob</label>
      <input type="checkbox" id="google" value="Google" v-model="checkedNames">
      <label for="google">Google</label>
      <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
      <label for="taobao">taobao</label>
      <br>
      <span>选择的值为: {{ checkedNames }}</span>
    </div>
    
    <script>
    new Vue({
      el: '#app',
      data: {
    	checked : false,
        checkedNames: []
      }
    })
    </script>
    </body>
    </html>
    

      

  • 相关阅读:
    树的一些操作
    线程池的概念
    线程池
    BLOB字段来保存fastreport的报表模板
    D7调用XE2 中间层注意事项
    xe2 datasnap中间层+d7客户端调用
    关于延迟时间的一点智慧

    插件
    phpstorm clone 码云项目到本地 Version Control 不显示
  • 原文地址:https://www.cnblogs.com/huaobin/p/15614618.html
Copyright © 2011-2022 走看看