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

<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">
       <input type="text" placeholder="enter title" v-model="title" />
       <my-component v-bind:my-title="title"></my-component>
   </div>

<script type="text/javascript">
       Vue.component("my-component", {
           props: {
               myTitle: {
                   type: String,
                   // 必填
                   required: true,
                   // 自定义校验器
                   validator: function (value) {
                       return value != null && value.length > 5;
                   }
               },
               myCount: {
                   type: Number,
                   // 默认值为 1024
                   default: 1024
               }
           },
           data: function(){
               return {
                   count: this.myCount
               };
           },
           template: `
               <div style="background:red;">
                   <h2>{{myTitle}}</h2>
                   <p>Count: {{count}}</p>
                   <p>
                       <button v-on:click="incr">myCount++</button>
                   </p>
               </div>
           `,
           methods: {
               incr: function(){
                   this.count += 1;
               }
           }
       });

var app = new Vue({
           el: "#app",
           data: {
               title: "Hello Vue.js"
           }
       });
   </script>

</body>
</html>

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

自动执行

代码编辑区

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

预览效果