前端 VUE编程之:复选框

[复制链接]
984|0
 楼主| keer_zu 发表于 2020-12-26 11:44 | 显示全部楼层 |阅读模式


  1. <template>
  2.   <div id="helloworld">
  3.   <p>单个复选框:</p>
  4.   <input type="checkbox" id="checkbox" v-model="checked">
  5.   <label for="checkbox">{{ checked }}</label>
  6.   <p>多个复选框:</p>
  7.   <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
  8.   <label for="runoob">Runoob</label>
  9.   <input type="checkbox" id="google" value="Google" v-model="checkedNames">
  10.   <label for="google">Google</label>
  11.   <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
  12.   <label for="taobao">taobao</label>
  13.   <br>
  14.   <span>选择的值为: {{ checkedNames }}</span>
  15.     <button v-on:click="say('hi')">Say hi</button>
  16.     <button v-on:click="say('what')">Say what</button>
  17.     <button v-on:click="counter += 1">增加 1</button>
  18.     <p>这个按钮被点击了 {{ counter }} 次。</p>
  19.     <br><br>
  20.     <p>input 元素:</p>
  21.     <input v-model="message" placeholder="编辑我……">
  22.     <p>消息是: {{ message }}</p>
  23.     <p>textarea 元素:</p>
  24.     <p style="white-space: pre">{{ message2 }}</p>
  25.     <textarea v-model="message2" placeholder="多行文本输入……"></textarea>
  26.     </div>
  27. </template>

  28. <script>
  29. export default {
  30.   name: 'HelloWorld',
  31.   data () {
  32.     return {
  33.       msg: 'Welcome to Your Vue.js App',
  34.       counter: 0,
  35.       message: 'Runoob',
  36.       message2: '菜鸟教程\r\nhttp://www.runoob.com',
  37.       checked: false,
  38.       checkedNames: []
  39.     }
  40.   },
  41.   methods: {
  42.     say: function (message) {
  43.       alert(message)
  44.     }
  45.   }
  46. }
  47. </script>

  48. <!-- Add "scoped" attribute to limit CSS to this component only -->
  49. <style scoped>
  50. h1, h2 {
  51.   font-weight: normal;
  52. }
  53. ul {
  54.   list-style-type: none;
  55.   padding: 0;
  56. }
  57. li {
  58.   display: inline-block;
  59.   margin: 0 10px;
  60. }
  61. a {
  62.   color: #42b983;
  63. }
  64. </style>


569165fe6b146a8f9e.png

html:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
  6. <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  7. </head>
  8. <body>
  9. <div id="app">
  10.   <p>单个复选框:</p>
  11.   <input type="checkbox" id="checkbox" v-model="checked">
  12.   <label for="checkbox">{{ checked }}</label>
  13.        
  14.   <p>多个复选框:</p>
  15.   <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
  16.   <label for="runoob">Runoob</label>
  17.   <input type="checkbox" id="google" value="Google" v-model="checkedNames">
  18.   <label for="google">Google</label>
  19.   <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
  20.   <label for="taobao">taobao</label>
  21.   <br>
  22.   <span>选择的值为: {{ checkedNames }}</span>
  23. </div>

  24. <script>
  25. new Vue({
  26.   el: '#app',
  27.   data: {
  28.         checked : false,
  29.     checkedNames: []
  30.   }
  31. })
  32. </script>
  33. </body>
  34. </html>


您需要登录后才可以回帖 登录 | 注册

本版积分规则

个人签名:qq群:49734243 Email:zukeqiang@gmail.com

1488

主题

12949

帖子

55

粉丝
快速回复 在线客服 返回列表 返回顶部