console
new Vue({
el: "#app",
data: {
todos: [
{ text: "Learn JavaScript", done: false },
{ text: "Learn Vue", done: false },
{ text: "Play around in JSFiddle", done: true },
{ text: "Build something awesome", done: true }
],
inpuTxt:'输入的文字'
},
methods: {
toggle: function(todo){
todo.done = !todo.done
}
},
components:{
'myomponents':{
props:['value'],
data: function () {
return {
count: 0
}
},
template:`
<div>
<input :value="value" v-on:input="$emit('input', $event.target.value)"/>
</div>
`,
}
}
})
<div id="app">
<h2>Todos:</h2>
<ol>
<li v-for="todo in todos">
<label>
<input type="checkbox"
v-on:change="toggle(todo)"
v-bind:checked="todo.done">
<del v-if="todo.done">
{{ todo.text }}
</del>
<span v-else>
{{ todo.text }}
</span>
</label>
</li>
</ol>
<myomponents v-model="inpuTxt"></myomponents>
{{inpuTxt}}
</div>
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#app {
background: #fff;
border-radius: 4px;
padding: 20px;
transition: all 0.2s;
}
li {
margin: 8px 0;
}
h2 {
font-weight: bold;
margin-bottom: 15px;
}
del {
color: rgba(0, 0, 0, 0.3);
}