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 >
	<hd-news></hd-news> <!--引入模板 和new Vue()里的components里注册时的名字 hdNews 要一致-->
	<hr>
	<hd-news></hd-news>

</div>
<script type="text/x-template" >
	<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={
        //绑定 的 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循环里的某条数据里的值

多处引用相同组件时,操作data不会相互影响

相关推荐