39.VUE学习--组件,子组件中data数据的使用,x-template模板的使用,改变for循环里的某条数据里的值
多处引用相同组件时,操作data不会相互影响
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>vue</title>
<link rel="stylesheet" href="">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- <script type="text/javascript" src="../js/vue.js"></script> -->
</head>
<body>
<div id="hdcms">
<hd-news></hd-news> <!--引入模板 和new Vue()里的components里注册时的名字 hdNews 要一致-->
<hr>
<hd-news></hd-news>
</div>
<script type="text/x-template" id="hdNewstemplate">
<div>
<li v-for="(v,k) in news">
{{v.id}}=>{{v.title}}=>
<button @click='changeadd(v,k)'>加</button>
{{v.num}}
<!--减法操作方法三，直接操作当前的v.num-->
<button @click='v.num-=1'>减</button>
<!--删除的两种方法-->
<!--方法一:直接操作data里的news数据-->
<button @click="news.splice(k,1)">删除</button>
<!--方法二:调用方法操作data里的news数据-->
<button @click="del(k);">删除</button>
</li>
</div>
</script>
<script>
var hdNews={
//绑定id="hdNews" 的 x-template模板
template:'#hdNewstemplate',
data(){
return {
news:[
{id:0,title:'tpshop',num:1},
{id:1,title:'hdcms',num:1}
],
}
},
methods:{
del(k){
console.log(k);
this.news.splice(k,1)
},
changeadd(v,k){
//方法一：直接操作传过来的当前对象的里的num
// console.log(v.id+v.title);
v.num=v.num*1+1;
//方法二：用传过来的k找到data里对应的当前对象，操作它里面的num
// this.news[0].num+=1;
},
}
};
new Vue({
el:'#hdcms',
//绑定组件hdNews hdNews:hdNews简写成hdNews
components:{hdNews},
data:{},
});
</script>
</body>
</html>
效果:
39.VUE学习--组件,子组件中data数据的使用,x-template模板的使用,改变for循环里的某条数据里的值的更多相关文章
- vue学习笔记(九)vue-cli中的组件通信
前言 在上一篇博客vue学习笔记(八)组件校验&通信中,我们学会了vue中组件的校验和父组件向子组件传递信息以及子组件通知父组件(父子组件通信),上一篇博客也提到那是对组件内容的刚刚开始,而本 ...
- vue学习笔记(八)组件校验&通信
前言 在上一章博客的内容中vue学习笔记(七)组件我们初步的认识了组件,并学会了如何定义局部组件和全局组件,上一篇内容仅仅只是对组件一个简单的入门,并没有深入的了解组件当中的其它机制,本篇博客将会带大 ...
- vue学习笔记之：为何data是一个方法
vue学习笔记之:为何data是一个方法 在vue开发中,我们可以发现,data中的属性值是在function中return出来的.可为何data必须是一个函数呢?我们先看官方的解释: 当一个组件被定 ...
- vue学习记录⑤（组件通信-父与子）
今天我们看一下组件通信. 经过前面几篇文章,我们已经可以构建出完整的单个组件,并利用路由使其串联起来访问了. 但这明显还是不够的.一个页面不可能就是个单组件,一般是由多个组件合成的.正因为如此,组件之 ...
- vue学习之父组件与子组件之间的交互
1.父组件数据传给子组件 父组件中的msgfather定义数据 在之组件中通过设置props来取得希望从父组件中获得的值 通过设置这两个属性就可以从父组件传数据到子组件 2.子组件传数据给父组件(这里 ...
- vue 父向子组件传递数据，子组件向父组件传递数据方式
父组件向子组件传递数据通过props,子组件引入到父组件中,设置一个值等于父组件的数据,通过:bind将数据传到子组件中,子组件中通过props接收父组件的数据,这样就可以使用父组件的数据了,循环组件 ...
- Vue学习之不同组件之间的消息传递
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue学习系列(二)——组件详解
前言 在上一篇初识Vue核心中,我们已经熟悉了vue的两大核心,理解了Vue的构建方式,通过基本的指令控制DOM,实现提高应用开发效率和可维护性.而这一篇呢,将对Vue视图组件的核心概念进行详细说明. ...
- vue学习笔记(七)组件
前言 在前面vue的一些博客中,我们几乎将vue的基础差不多学习完了,而从本篇博客开始将会进入到vue的另一个阶段性学习,本篇博客的内容在以后的vue项目中占很大的比重,所以小伙伴们需要认真学习,本篇 ...
随机推荐
- IIS 伪静态 脚本映射 配置方法
首先,是IIS7.0的配置,由于Windows Server 2008操作系统默认的IIS版本为7.0,我们知道,IIS7.0与IIS6.0 核心注意的地方:先要将应用池设置为集成模式,修改OK后,再 ...
- 在CentOS的profile文件中配置环境变量
# idea jdk7 settings start #JAVA_HOME=/usr/local/jdk/jdk1.7.0_79 #JRE_HOME=$JAVA_HOME/jre #PATH=$PAT ...
- spring笔记2-注解
一.属性与成员变量的区别: 属性:对外暴露的,getxxx/setxxx称为属性; 成员变量:private String name称为成员变量或字段 二.applicationContext.xml ...
- window下隐藏apache版本和PHP脚本等敏感信息
隐藏Apache信息 1.1 主配置中启用httpd-default.conf 文件: conf/httpd.Conf 找到httpd-default.conf,删除前面的注释“#”,改成如下 Inc ...
- 栅格那点儿事（四D）
统计值与空值 在上一篇的内容里反复提到了一个统计值.那这个统计值是怎么来的,具体是干嘛用的呢? 统计值主要就是用于栅格数据的显示和重分类,顾名思义就是一个波段中所有像元值的一个统计信息,最大值,最小值 ...
- tfs2012安装
今天正在配置tfs的服务器.要先安装net 3.5 ps1.要选择安装reportingservers 来启动报表功能.
- matplotlib安装指南
matplotlib安装指南1.介绍NumPy地址 http://www.numpy.org/NumPy:一个Python一个扩展库,支持大量的维度数组和举证运算,对数组提供大量的函数库 SciPy地 ...
- 虚拟机的NAT模式连接centos7配置静态IP连接外网
小小的配置,各种五花八门的介绍. 1.打开VMWare->编辑->虚拟网络编辑器->点击更改设置 2.选中VMnet8->取消使用本地DHCP服务将IP地址分配给虚拟机-> ...
- Sublime插件支持Sass编译和Babel解析ES6 & .sublime-build文件初探（转载自imwtr）
原文请看:http://www.cnblogs.com/imwtr/p/6010550.html 用Sublime Text蛮久了,配置配来配去的,每次换电脑都得重头再配过,奈何人老了脑子不中用了 ...
- IOS 打开照相机 打开相册
/** * 打开照相机 */ - (void)openCamera { if (![UIImagePickerController isSourceTypeAvailable:UIImagePicke ...