vue.js 2的表单控件

时间：2017-04-04 11:59:28 阅读：216 评论：0 收藏：0 [点我收藏+]

标签：demo doc multiple false ges option head selected css

静下心，抄一段sample，以后可以快点到这里来抄。。。：

<!DOCTYPE html>
<html>
  <head>
      <meta charset="UTF-8">
      <title></title>
      <link rel="stylesheet" href="demo.css" />
  </head>
  <body>
  <div id="app">
    <input type="text" v-model="message" />
    <span>Your input is: {{ message }}</span>
    <p></p>

    <label><input type="radio" value="male" v-model="gender">男</label>
    <label><input type="radio" value="female" v-model="gender">女</label>
    <p>{{gender}}</p>

    <input type="checkbox" v-model="checked" />
    <span> checked:　{{checked}}</span>
    <p></p>

    <label><input type="checkbox" value="1" v-model="multiChecked">1</label>
    <label><input type="checkbox" value="2" v-model="multiChecked">2</label>
    <label><input type="checkbox" value="3" v-model="multiChecked">3</label>
    <p>multiChecked: {{multiChecked.join(‘|‘)}}</p>

    <select v-model="selected">
      <option selected>A</option>
      <option>B</option>
      <option>C</option>
      <option>D</option>
    </select>
    <span> Selected:　{{selected}}</span>
    <p></p>

    <select v-model="multiSelected" multiple>
      <option selected>A</option>
      <option>B</option>
      <option>C</option>
      <option>D</option>
    </select>
    <span> MultiSelected:　{{multiSelected.join(‘|‘)}}</span>
    <p></p>

    <input type="checkbox" v-model="checked" v-bind:true-value="a" v-bind:false-value="b">
    <span> checked:　{{checked}}</span>
    <p></p>

    <input type="radio" v-model="checked" v-bind:value="a">
    <span> checked:　{{checked}}</span>
    <p></p>

    <select v-model="selected"> 
      <option v-bind:value="{number: 123}"> 123</option>
    </select>
    <span> Selected:　{{selected}}</span>
    <p></p>

    <div class="tab" v-bind:class="{‘active‘: active, ‘unactive‘: !active}">
    </div>

    <div v-bind:class="[classA, classB]"></div>

    <div v-bind:style="alertStyle"></div>

  </div>
  <template v-if="yes">
    <p>This is 1 dom</p>
    <p>This is 2 dom</p>
    <p>This is 3 dom</p>
    <p>This is 4 dom</p>
  </template>
  
  </body>
  <script src="http://cdn.bootcss.com/vue/2.2.4/vue.min.js"></script>
  <script>
    var vm = new Vue({
      el: "#app",
      data: {
        message: "",
        gender: "",
        checked: "",
        multiChecked: [],
        selected: "",
        multiSelected: [],
        a: "a",
        b: "b",
        yes: true,
        active: true,
        classA: ‘class-a‘,
        classB: ‘class-b‘,
        alertStyle: {
          color: "red",
          fontSize: "20px"
        }
      }

      })
  </script>
</html>

技术分享

vue.js 2的表单控件

标签：demo doc multiple false ges option head selected css

原文地址：http://www.cnblogs.com/aguncn/p/6664413.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行