vue(5)绑定2

秒速五厘米 2022-01-12 13:57 243阅读 0赞 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>vue</title>
  6.     <style type="text/css">
  7.         table tr td{ 
  8.             border:1px solid gray;
  9.             padding:10px;
  10.         }
  11.         table{ 
  12.             border-collapse:collapse;
  13.             width:800px;
  14.             table-layout:fixed;
  15.         }
  16.         tr.firstLine{ 
  17.             background-color: lightgray;
  18.         }
  19.     </style>
  20. </head>
  21. <body>
  22.     <script src="vue.min.js"></script>
  24.     <div id="div1">
  25.         <table align="center">
  26.             <tr class="firstLine">
  27.                 <td>视图类型</td>
  28.                 <td>输入数据</td>
  29.                 <td>绑定到vue上的值</td>
  30.             </tr>
  31.             <tr>
  32.                 <td>单行文本</td>
  33.                 <td>
  34.                     <input type="text" v-model="input" placeholder="输入数据">
  35.                 </td>
  36.                 <td>{ { input}}</td>
  37.             </tr>
  38.             <tr>
  39.                 <td>多行文本</td>
  40.                 <td>
  41.                     <textarea v-model="textarea" placeholder="输入数据"></textarea>
  42.                 </td>
  43.                 <td>{ { textarea}}</td>
  44.             </tr>
  45.             <tr>
  46.                 <td>单个复选框</td>
  47.                 <td>
  48.                     <input type="checkbox" id="checkbox" v-model="checked">
  49.                 </td>
  50.                 <td>{ { checked}}</td>
  51.             </tr>
  52.             <tr>
  53.                 <td>多个复选框</td>
  54.                 <td>
  55.                     <input type="checkbox" id="teemo" value="teemo" v-model="checkedes">
  56.                     <label for="teemo">teemo</label>
  57.                     <input type="checkbox" id="gareen" value="gareen" v-model="checkedes">
  58.                     <label for="gareen">gareen</label>
  59.                     <input type="checkbox" id="annie" value="annie" v-model="checkedes">
  60.                     <label for="annie">annie</label>
  61.                 </td>
  62.                 <td>{ { checkedes}}</td>
  63.             </tr>
  64.             <tr>
  65.                 <td>单选按钮</td>
  66.                 <td>
  67.                     <input type="radio" id="one" value="one" v-model="radio">
  68.                     <label for="one">one</label>
  69.                     <input type="radio" id="two" value="two" v-model="radio">
  70.                     <label for="two">two</label>
  71.                 </td>
  72.                 <td>{ { radio}}</td>
  73.             </tr>
  74.             <tr>
  75.                 <td>单选选择框</td>
  76.                 <td>
  77.                     <select v-model="selected" size="5">
  78.                         <option disabled="disableds">请选择</option>
  79.                         <option>html</option>
  80.                         <option>css</option>
  81.                         <option>js</option>
  82.                     </select>
  83.                 </td>
  84.                 <td>{ { selected}}</td>
  85.             </tr>
  86.             <tr>
  87.                 <td>多选选择框</td>
  88.                 <td>
  89.                     <select v-model="selecteds" multiple size="5">
  90.                         <option disabled="disabled">请选择</option>
  91.                         <option>html</option>
  92.                         <option>css</option>
  93.                         <option>js</option>
  94.                     </select>
  95.                 </td>
  96.                 <td>{ { selecteds}}</td>
  97.             </tr>
  98.             <tr>
  99.                 <td>单个复选框自定义</td>
  100.                 <td>
  101.                     <input type="checkbox" id="toggle" true-value="对了" false-value="错误" v-model="toggle">
  102.                 </td>
  103.                 <td>{ { toggle}}</td>
  104.             </tr>
  105.         </table>
  106.     </div>
  108.     <script type="text/javascript">
  109.         new Vue({ 
  110.             el:"#div1",
  111.             data:{ 
  112.                 input:'',
  113.                 textarea:"",
  114.                 checked:'',
  115.                 checkedes:[],
  116.                 radio:'',
  117.                 selected:'',
  118.                 selecteds:[],
  119.                 toggle:''
  120.             }
  121.         });
  122.     </script>
  123. </body>
  124. </html>

在这里插入图片描述

发表评论

表情：
评论列表 （有 0 条评论，243人围观）

还没有评论，来说两句吧...

相关阅读

    相关 Vue 数据绑定

    数据绑定就是将页面的数据和视图关联起来，当我们的数据变化的时候，视图可以自动更新。 插值 文本插值是数据绑定的最基本形式，使用双花括号“\{ \{ \}\}”,这种语法在

    叁歲伎倆叁歲伎倆/ 0 赞/ 298 阅读

    相关 VUE 样式绑定

    操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接

    蔚落蔚落/ 0 赞/ 461 阅读