Vue realizes the simple function of Notepad (add delete statistics, empty and hide)
Some additions last time:
- V-for is OK?
- Before iterating the attribute output, sort the attributes in ascending order and output
html部分：
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<div id="app">
<ul>
<li v-for="n in object">
{
{ n }}
</li>
</ul>
</div>
js部分：
new Vue({
el: '#app',
data: {
object: {
2: '开心',
1: '难过',
0: '无奈'
}
}
})
//结果：按照012排列的一个列表：无奈 难过 开心
Notepad added:
- Premise analysis
- Generate list structure (V-for, string array)
- Get user input (v-model)
- Enter to add data (v-on, enter add)
- Code
<body>
<!--主体区域-->
<section id="todoapp">
<!--输入框-->
<header class="header">
<h1>小歪记事本</h1>
<input v-model="inputValue" @keyup.enter="add" autofocus="autofocus" autocomplete="off" placeholder="请输入任务" class="new-todo">
</header>
<!--列表区域-->
<section class="main">
<ul class="todo-list">
<li class="todo" v-for="(item,index) in list">
<div class="view">
<span class="index">{
{index+1}}.</span>
<label>{
{item}}</label>
<button class="destroy"></button>
</div>
</li>
</ul>
</section>
<footer class="footer"></footer>
</section>
<!--底部-->
<footer class="info"></footer>
<!--开发环境版本包含有帮助的命令行警告-->>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app=new Vue({
el:"#todoapp",
data:{
list:["写代码","睡觉觉","陪真真"],
inputValue:"好好学习"
},
methods:{
add:function(){
this.list.push(this.inputValue);
}
}
})
</script>
</body>
- Code analysis:
- v-for generates list structure based on array
- v-model binds data in two directions, associates form data with elements, and takes values
v-on
delete
- Premise analysis
- Click to delete the specified function (v-on splice index)
Review: splice
- Code
//只提新增的代码
//js部分
methods:{
add:function(){
this.list.push(this.inputValue);
},
remove:function(index){
console.log("删除");
console.log(index);
this.list.splice(index,1);
}
}
})
//HTML部分
<button class="destroy" @click="remove(index)"></button>
- Code analysis
- Data changes and data binding elements change synchronously
- Custom parameters for events
- The role of splice() method (reviewed earlier, screenshots are from W3SCHOOL)
Statistics (number of list elements)
- Premise analysis
- Number of statistics (v-text length)
- Code
<span class="todo-count"> <strong>{
{ list.length}}</strong>item left</span><!--增加那里从3->4删除减少，数据同步变化-->
Code analysis: the number of data-based developments
Empty
- Premise analysis
- Click to clear all information (v-on clears the array)
- Code
js部分：
clear:function(){
this.list=[];
}
html部分：
<button class="clear-completed" @click="clear">Clear</button>
hide
- Premise analysis
- When there is no data, hide the data (v-show, v-if array is not empty)
- Code
<span class="todo-count" v-if="list.length!=0">
<button v-show="list.length!=0" class="clear-completed" @click="clear">Clear</button>
Comprehensive code
<body>
<!--主体区域-->
<section id="todoapp">
<!--输入框-->
<header class="header">
<h1>小歪记事本</h1>
<input v-model="inputValue" @keyup.enter="add" autofocus="autofocus" autocomplete="off" placeholder="请输入任务" class="new-todo">
</header>
<!--列表区域-->
<section class="main">
<ul class="todo-list">
<li class="todo" v-for="(item,index) in list">
<div class="view">
<span class="index">{
{index+1}}.</span>
<label>{
{item}}</label>
<button class="destroy" @click="remove(index)"></button>
</div>
</li>
</ul>
</section>
<footer class="footer" v-show="list.length!=0"><!--隐藏父元素可以隐藏也可以不隐藏，不隐藏页面效果更好一些-->
<span class="todo-count" v-if="list.length!=0">
<strong>{
{ list.length}}</strong>item left</span><!--增加那里从3->4删除减少，数据同步变化-->
<button v-show="list.length!=0" class="clear-completed" @click="clear">Clear</button>
</footer>
</section>
<!--底部-->
<footer class="info"></footer>
<!--开发环境版本包含有帮助的命令行警告-->>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app=new Vue({
el:"#todoapp",
data:{
list:["写代码","睡觉觉","陪真真"],
inputValue:"好好学习"
},
methods:{
add:function(){
this.list.push(this.inputValue);
},
remove:function(index){
console.log("删除");
console.log(index);
this.list.splice(index,1);
},
clear:function(){
this.list=[];
}
}
})
</script>
</body>