<!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. CMDB经验分享之 – 剖析CMDB的设计过程

    作为IT管理的核心,CMDB逐渐成为系统管理项目实施的热点.在很多的案例中,由于忽视了CMDB的因素,ITIL的深入应用受到了极大的挑战.同时,由于CMDB是IT管理信息的集中,CMDB也是一个重要的 ...

  2. Django中URL的解析和反查

    add by zhj: 如果想用reverse(namespace1:namespace2:...:namespaceN:name)反查url(注意:用reverse('polls:index')方法 ...

  3. python 面向对象 字典 有序字典

    和原来字典一模一样 把dict 传进去 相当于这个类就是一个字典 # 把dict 传进去 相当于这个类就是一个字典 class Mydict(dict): pass d = Mydict() prin ...

  4. shell 变量定义技巧总结

    可以多学习和模仿操作系统自带的/etc/init.d/functions函数库脚本的定义思路,多学习Linux系统脚本中的定义,有经验的读者最终应形成一套适合自己的规范和习惯. (1)变量名及变量内容 ...

  5. Cardano(ADA)， EOS, RChain(RHOC), Aeternity(AE) 都是极其好的币

    从区块链的基础知识出发,研究ETH和EOS的区别 免责声明:EOS目前还在开发中,我们对此项目的一些理解可能会改变.而且,我并不是以太坊开发者,而只是一个喜欢区块链的爱好者.请牢记这两点,请把下面的内 ...

  6. Flask系列之源码分析（一）

    目录: 涉及知识点 Flask框架原理 简单示例 路由系统原理源码分析 请求流程简单源码分析 响应流程简单源码分析 session简单源码分析 涉及知识点 1.装饰器 闭包思想 def wapper( ...

  7. 【Lua】模块与包

    定义:         从用户观点来看,一个模块就是一个程序库,可以通过require来加载(require用于使用模块,module用于创建模块),然后便得到了一个全局变量,表示一个table,这个 ...

  8. java基础类型中的char和byte的辨析及Unicode编码和UTF-8的区别

    在平常工作中使用到char和byte的场景不多,但是如果项目中使用到IO流操作时,则必定会涉及到这两个类型,下面让我们一起来回顾一下这两个类型吧. char和byte的对比 byte byte 字节, ...

  9. CCPC 2016-2017, Finals Solution

    A - The Third Cup is Free 水. #include<bits/stdc++.h> using namespace std; ; int n; int arr[max ...

  10. hdu5141 线段树

    这题说的是给了一串然后计算出这个串的最长递增子序列的长度,然后计算出有过少个子串[i,j] 他们的最长递增子序列和这整个子串的最长递增子序列相同,我们对于每个j最长递增子序列找出他在序列中的使成为最长 ...