Vue 变异方法splice删除评论功能
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="vue.js"></script>
<title id="title">{{title}}</title>
</head>
<body>
<div id="ask"><!--vue不能控制body和html的标签-->
<ul>
<li v-for="(v,k) in list">
{{v.content}}<button v-on:click="remove(k)">删除</button>
</li>
</ul>
<textarea v-model="content" cols="30" rows="10"></textarea> <button v-on:click="push('pre')">发表到前面</button>
<button v-on:click="push('end')">发表到后面</button> <button v-on:click="del('first')">删除第一条</button>
<button v-on:click="del('last')">删除最后一条</button>
</div>
<script>
var vue = function (options){new Vue(options)};
vue({
el:'#title',
data:{
title:'Vue 变异方法splice删除评论功能'
}
});
var app = vue({
el:'#ask',
data:{
content:'',
list:[
{'content':'ask.mykeji.net'},
{'content':'简单记录'}
]
},
methods:{
remove(k){
this.list.splice(k,1)
},
push(type){
var content_push = {'content':this.content};
switch (type) {
case 'pre':
this.list.unshift(content_push);
break;
case "end":
this.list.push(content_push);
break;
}
this.content='';
},
del(type){
switch (type) {
case 'first':
this.list.shift();
break;
case "last":
this.list.pop();
break;
}
}
}
}); </script>
</body>
</html>
Vue 变异方法splice删除评论功能的更多相关文章
- Vue 变异方法filter和正则RegExp对评论进行搜索
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue 变异方法sort&reverse对评论进行排序
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue 变异方法unshift&pop&shift
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue 变异方法Push的留言板实例
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue学习（5）-评论功能（利用父组件的方法）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue变异方法
push() 往数组最后面添加一个元素,成功返回当前数组的长度 pop() 删除数组的最后一个元素,成功返回删除元素的值 shift() 删除数组的第一个元素,成功返回删除元素的值u ...
- vue数组变异方法
Vue数组变异方法,会改变被这些方法调用的原始数组,将会触发视图更新 push() 接收任意数量的参数,把它们逐个添加到数组末尾,并返回修改后数组的长度 pop() 从数组末尾移除最后一项,减少数组的 ...
- Vue列表渲染-变异方法
Vue 包含一组观察数组的变异方法,变异方法 (mutation method),顾名思义,会改变被这些方法调用的原始数组 所以它们也将会触发视图更新.这些方法如下: push() pop() shi ...
- vue教程2-07 微博评论功能
vue教程2-07 微博评论功能 <!doctype html> <html> <head> <meta charset="utf-8"& ...
随机推荐
- Error response from daemon: Get https://registry-1.docker.io/v2/: net/http: request canceled while waiting for connection (Client.Timeout exceeded while awaiting headers)
docker pull nginx 遇到这个问题 Error response from daemon: Get https://registry-1.docker.io/v2/: net/http: ...
- WPF 精修篇 样式继承
原文:WPF 精修篇 样式继承 这个 是新知识 样式可以继承 <Style x:Key="TextBlockStyleBase" TargetType="{x:Ty ...
- Repair Microsoft.VisualStudio.MinShell.Msi.Resources 2203 error And visual studio 2019 key
1. Go to the properties of "My computer" 2. Go to advanced settings of the system 3. Go to ...
- 报错：Something is already running on port 8000.
在用react框架的时候,用cnpm run dev命令执行项目时,有时会出现这种错误, 这是因为你之前执行过该命令,但是没关闭,解决办法是打开任务管理器, 在进程中找到node.exe,右键关闭这个 ...
- centos安装mongodb 4.x及配置用户名密码（官方推荐的方式）
安装mongodb 先在本地用记事本做一个这样的文件(命名为:mongodb-org-4.0.repo): [mongodb-org-4.0] name=MongoDB Repository base ...
- ExtJS布局控件
Layout Controls Auto Layout Ext JS4中的容器的默认布局是自动布局.这个布局管理器会自动地将组件放在一个容器中. Fit Layout Fit布局安排了容器的内容完全占 ...
- 【shell脚本】一键部署LNMP===deploy.sh
一键部署mysql,php,nginx,通过源码安装部署 #!/bin/bash # 一键部署 LNMP(源码安装版本) menu() { clear echo " ############ ...
- 09-Django静态文件
1.静态文件 项目中的图片.CSS.js都是静态文件,一般会将静态文件放到一个单独的目录下,也方便管理.一般会将静态文件放到一个单独的目录下,也可以放在应用的目录下,由于静态文件是全部应用都在使用的, ...
- element-admin中echarts图标宽度无法修改
默认示例 <template> <div> <el-row :gutter="0"> <el-col :xs="24" ...
- SpringBoot（四） SpringBoot整合JdbcTemplate
一.数据准备CREATE TABLE `tb_user` ( `id` int(11) NOT NULL AUTO_INCREMENT COMMENT 'ID', `username` varchar ...