<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>组件之子组件中data使用实例与text-xtemplate的使用方法</title>

    <script src="vue.js"></script>

</head>

<body>

<!--

    组件：可互用、维护省力

-->

<div id="lantian">

    <!--局部组件的调用：使用组件的名时，如果是驼峰式的写法，需要用 - 分开-->

    <lt-News></lt-News>

    <hr>

    <lt-News></lt-News>

    <hr>

    <lt-News></lt-News>

</div>

<script typeof="text/x-template" id="ltNews">

    <div>

        <li v-for="(v,k) in news">

        {{v.title}}

        <button @click="del(k)">删除</button>

    </li>

    </div>

</script>

<script>

    var ltNews = {

        template: "#ltNews",

        data() {

            return {

                news: [

                    {title: 'lantianCms'},

                    {title: 'lantianPhp'}

                ]

            };

        },

        methods: {

            del(k) {

                this.news.splice(k, 1);

            }

        }

    };

    new Vue({

        el: "#lantian", //根组件，其他的就是子组件

        //定义局部组件：

        components: {ltNews}

    });

</script>

</body>

</html>

　　

039——VUE中组件之子组件中data使用实例与text-xtemplate的使用方法的更多相关文章

  1. Vue中，父组件向子组件传值

    1:在src/components/child/文件夹下,创建一个名为:child.vue的子组件 2:在父组件中,设置好需要传递的数据 3:在App.vue中引入并注册子组件 4:通过v-bind属 ...

  2. VUE中父组件向子组件传递数据 props使用

    VUE中,子组件是不能直接访问父组件的数据(一般来说,当然如果你要破坏原则也是可以),如下< <body> <div id="fathercomponent" ...

  3. Vue中父组件向子组件传值

    Vue中父组件向子组件传值 相关Html: <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  4. 042——VUE中组件之子组件使用$on与$emit事件触发父组件实现购物车功能

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

  5. vue组件中的样式属性：scoped，解决在父组件中无法修改子组件样式问题

    Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范. vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当前组件元素,它是通过使 ...

  6. vue.js中父组件触发子组件中的方法

    知识点:vue.js中,父组件的method中,触发子组件中的方法,获得子组件中的定义的属性 (1)子组件 : child_crud.js var html_child_crud= "< ...

  7. vue 项目， 通知子组件更新，父组件中每次点击按钮重新加载子组件，（重新生成dom 元素）

    vue是组件化开发的项目,很多情况下会把公共组件提取出来,来减少代码量,提高开发效率,和以后更好的可维护性.很多情况下,父组件中都会引用子组件这种情况.通过给在父组件中引用的子组件标签上添加属性,来渲 ...

  8. VUe.js 父组件向子组件中传值及方法

    父组件向子组件中传值 1.  Vue实例可以看做是大的组件,那么在其内部定义的私有组件与这个实例之间就出现了父子组件的对应关系. 2. 父子组件在默认的情况下,子组件是无妨访问到父组件中的数据的,所以 ...

  9. Vue的父子组件v-model双向绑定，父组件修改子组件中绑定的v-model属性

    先来看下实现的效果,父组件中有个文本框,在点击下面按钮时弹出抽屉,抽屉里也有个文本框,文本框里的初始值要和父组件的文本框同步,并且修改抽屉里的文本框值时 父组件里的文本框值也要跟着改变 网上有大概三种 ...

随机推荐

  1. 关于mysql5.7的一些变化

    最近接了个项目,使用的数据库是5.7的,开始没太在意,但是在接手的过程中发送了些小插曲,特意记录下来. 首先,我想自己安装个noinstall版本的,结果发信下载下来的和之前版本的不一样,没有data ...

  2. CRM - 销售与客户

    一.销售与客户 - 表结构 ---公共客户(公共资源) 1.没有报名 2.3天没有跟进 3.15天没有成单 客户分布表 龙泰 男 yuan 2018-5-1 3天未跟进 龙泰 男 三江 2018-5- ...

  3. iOS定位原理和使用建议（转）

    原文:http://ibbs.91.com/thread-1548870-1-1.html 看到很多网友讨论iOS设备定位的问题,这里将我们所了解的关于iPhone.iPad.iPod等的定位原理做详 ...

  4. Java面试人事篇（二）

    1.请你自我介绍一下你自己? 回答提示:一般人回答这个问题过于平常,只说姓名.年龄.爱好.工作经验,这些在简历上都有.其实,企业最希望知道的是求职者能否胜任工作,包括:最强的技能.最深入研究的知识领域 ...

  5. MongDb的安装

    MongoDB是一个基于分布式文件存储的数据库,由c++语言编写,为WEB应用提供可扩展的高性能数据存储解决方案.MongoDB属于非关系数据库,也不能说完全属于,更像是介于关系数据库和非关系数据库之 ...

  6. idea一个类中，各个修饰符的符号表示

    1: 2:

  7. Yarn框架和工作流程研究

    一.概述     将公司集群升级到Yarn已经有一段时间,自己也对Yarn也研究了一段时间,现在开始记录一下自己在研究Yarn过程中的一些笔记.这篇blog主要主要从大体上说说Yarn的基本架构以及其 ...

  8. 离线安装部署zabbix

    一. 安装好CentOS安装过程中添加php,mariadb等所需要的依赖 二. 准备好所有所需的rpm压缩文件包在centos中解压,这里放在根目录下zabbix_rpms文件夹下 三. 安装所需r ...

  9. jsoup做http接口测试

    本文转载张飞的博客http://www.cnblogs.com/zhangfei/p/4359408.html在此感谢博主的分享! 最早用Jsoup是有一个小的爬虫应用要写,发现Jsoup较HttpC ...

  10. 全自动照片美化软件Photolemur mac特别版

    今天小编为大家带来的是世界上首个支持全自动照片美化的软件Photolemur mac特别版.Photolemur中文特别版采用了全新的人工智能AI系统,它能够全自动智能的对您的照片进行曝光.亮度.降噪 ...