多处引用相同组件时,操作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循环里的某条数据里的值的更多相关文章

  1. vue学习笔记(九)vue-cli中的组件通信

    前言 在上一篇博客vue学习笔记(八)组件校验&通信中,我们学会了vue中组件的校验和父组件向子组件传递信息以及子组件通知父组件(父子组件通信),上一篇博客也提到那是对组件内容的刚刚开始,而本 ...

  2. vue学习笔记(八)组件校验&通信

    前言 在上一章博客的内容中vue学习笔记(七)组件我们初步的认识了组件,并学会了如何定义局部组件和全局组件,上一篇内容仅仅只是对组件一个简单的入门,并没有深入的了解组件当中的其它机制,本篇博客将会带大 ...

  3. vue学习笔记之：为何data是一个方法

    vue学习笔记之:为何data是一个方法 在vue开发中,我们可以发现,data中的属性值是在function中return出来的.可为何data必须是一个函数呢?我们先看官方的解释: 当一个组件被定 ...

  4. vue学习记录⑤（组件通信-父与子）

    今天我们看一下组件通信. 经过前面几篇文章,我们已经可以构建出完整的单个组件,并利用路由使其串联起来访问了. 但这明显还是不够的.一个页面不可能就是个单组件,一般是由多个组件合成的.正因为如此,组件之 ...

  5. vue学习之父组件与子组件之间的交互

    1.父组件数据传给子组件 父组件中的msgfather定义数据 在之组件中通过设置props来取得希望从父组件中获得的值 通过设置这两个属性就可以从父组件传数据到子组件 2.子组件传数据给父组件(这里 ...

  6. vue 父向子组件传递数据，子组件向父组件传递数据方式

    父组件向子组件传递数据通过props,子组件引入到父组件中,设置一个值等于父组件的数据,通过:bind将数据传到子组件中,子组件中通过props接收父组件的数据,这样就可以使用父组件的数据了,循环组件 ...

  7. Vue学习之不同组件之间的消息传递

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. Vue学习系列(二)——组件详解

    前言 在上一篇初识Vue核心中,我们已经熟悉了vue的两大核心,理解了Vue的构建方式,通过基本的指令控制DOM,实现提高应用开发效率和可维护性.而这一篇呢,将对Vue视图组件的核心概念进行详细说明. ...

  9. vue学习笔记(七)组件

    前言 在前面vue的一些博客中,我们几乎将vue的基础差不多学习完了,而从本篇博客开始将会进入到vue的另一个阶段性学习,本篇博客的内容在以后的vue项目中占很大的比重,所以小伙伴们需要认真学习,本篇 ...

随机推荐

  1. maven课程 项目管理利器-maven 3-1 maven常用的构建命令

    mvn -v 查看mvn版本 mvn compile  编译 mvn test 测试 mvn package 编译,打包(这个命令会在你的项目路径下一个target目录,并且拥有compile命令的功 ...

  2. PHP中函数的定义与使用

    函数是什么? 函数是一个被命名的.独立的代码段,它执行特定的任务,并可能给调用它的程序返回一个值. 函数是被命名的,每个函数都有唯一的名称. 函数是独立的,无需程序其他部分干预,函数便能执行自己的任务 ...

  3. vue 钩子函数

    beforeRouteEnter 方法名称: beforeRouteEnter 调用时机: 切换路由之前,调用该方法时,页面还没有切换 next调用时机: activated 之后 注意事项: thi ...

  4. The thirteen day

    Well begun is hanlf done 良好的开端是成功的一半.(此句是省略句,Something that is well begun is something that is half ...

  5. Android实现异步的几种方法

    在Android项目中,有经验的开发人员都知道,一些耗时的IO操作等都必须在子线程中去操作,那么可以有哪些方法来开启子线程呢,一般可以使用Java中自带的几种方法,也可以使用Andorid特有的一些类 ...

  6. WiFi调试手机

     转自http://blog.csdn.net/Yejianyun1/article/details/55511726 使用场景: 1.多设备执行测试用例 2.数据线无法满足使用 电脑与手机的网络需要 ...

  7. Moodle-3.1.2 (Ubuntu 16.04 )

    平台: Ubuntu 类型: 虚拟机镜像 软件包: moodle-3.1.2 commercial education moodle open-source 服务优惠价: 按服务商许可协议 云服务器费 ...

  8. Linux命令之文件重定向2

    linux中重定向用符号“>”表示,语法一般是 源文件 > 目标文件 1)创出.txt文件touch 1.txt 注意:创建文件夹用mkdir 2)向.txt文件中写入内容 注意:①cat ...

  9. vos设置禁止被叫特定号码段特定区域

    问题: 为了防止卡线遭投诉被运营商停,给公司带来损失,对一些特定号段特定区域要进行限制,不让客户呼出 打开VOS3000 落地网关——补充设置——落地被叫前缀——禁止 添加禁止号段 具体案例: 如填写 ...

  10. 笨办法学Python（三十六）

    习题 36: 设计和调试 现在你已经学会了“if 语句”,我将给你一些使用“for 循环”和“while 循环”的规则,一面你日后碰到麻烦.我还会教你一些调试的小技巧,以便你能发现自己程序的问题.最后 ...