在线代码编辑器-开发工具-核心编程

<html>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Vue</title>
   <script src="https://www.hxstrive.com/cdn/libs/vue/2.7.16/vue.min.js"></script>
</head>
<body>

<div id="app">
       <h1>lovingVue = {{ lovingVue }}</h1>
       <base-checkbox v-model="lovingVue"></base-checkbox>
   </div>

<script type="text/javascript">
       Vue.component('base-checkbox', {
           // 定义 v-model 默认的属性名和事件
           model: {
               prop: 'checked',
               event: 'change'
           },
           props: {
               // 1.父组件传值给子组件
               // 将 lovingVue 的值传递给该 checked
               checked: Boolean
           },
           // 2.子组件将值传递给父组件
           // 通过 v-bind:checked 将 checked Prop 绑定到 checked 属性
           // 通过 v-on:change 将当前复选框的 checked 传递给父组件
           template: `
               <label>
                   <input type="checkbox"
                       v-bind:checked="checked"
                       v-on:change="$emit('change', $event.target.checked)" /> 复选框
               </label>
           `
       });

var app = new Vue({
           el: "#app",
           data: {
               lovingVue: null
           }
       });
   </script>

</body>
</html>

在线代码编辑器 HTML / CSS / JavaScript 实时预览

自动执行

代码编辑区

字符数: 0 提示: 输入完整的 HTML 代码，需包含 DOCTYPE 声明与 html 根标签

预览效果