<!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. php基础：面向对象

    一.public.private.protected访问修饰符 public:任何都可以访问(本类.子类.外部都可以访问) protected:本类.子类都可以访问(本类.子类均可访问) privat ...

  2. android studio 使用CMAKE

    前言 之前,每次需要边写C++代码的时候,我的内心都是拒绝的.  1. 它没有代码提示!!!这意味着我们必须自己手动敲出所有的代码,对于一个新手来说,要一个字母都不错且大小写也要正确,甚至要记得住所有 ...

  3. 跟我学Makefile（二）

    命令出错: 每当命令运行完后, make 会检测每个命令的返回码,如果命令返回成功,那么 make 会执行下一条命令. 如果一个规则中的某个命令出错了(命令退出码非零),那么 make 就会终止执行当 ...

  4. LNMP简要配置

    部署LNMP环境 nginx[web服务,接收用户的请求] php [解释器] <tab> [服务] mariadb [数据库客户端] mariadb-server [数据库服务器] ma ...

  5. PAT 1127 ZigZagging on a Tree[难]

    1127 ZigZagging on a Tree (30 分) Suppose that all the keys in a binary tree are distinct positive in ...

  6. PAT 1128 N Queens Puzzle[对角线判断]

    1128 N Queens Puzzle(20 分) The "eight queens puzzle" is the problem of placing eight chess ...

  7. What do you think the coming adidas NMD Singapore

    adidas NMD Singapore is surprising everybody with a lot of completely new NMD choices combined with ...

  8. Spring—Ioc

    IoC容器,最主要的就是完成对象的创建以及维护对象的依赖关系等. 所谓控制反转,包括两部分:一是控制,二是反转,就是把传统方式需要由代码来实现对象的创建.维护对象的依赖关系,反转给容器来帮忙管理和实现 ...

  9. ubuntu下 adb devices找不到devices

    不同手机用数据线与ubuntu连接后,执行adb devices,好多出现找不到devices的情况. 这里解决措施: 1. 执行lsusb(连接手机前与后) 找到显示内容的差异项: root@loc ...

  10. AVAudioFoundation(6)：时间和媒体表示

    本文转自:AVAudioFoundation(6):时间和媒体表示 | www.samirchen.com 本文主要内容来自 AVFoundation Programming Guide. 基于时间的 ...