<!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. python3.7.2 ssl版本过低导致pip无法使用的问题

    环境:系统是centos6.6,python:python3.7.2 问题:安装好python3.pip后,在通过pip install xx 安装模块时,发现无法安装的问题,提示版本太低,系统默认的 ...

  2. nginx:负载均衡的session共享

    一.场景 当nginx做了负载均衡之后,同一个ip的url请求服务器的时候,负载均衡会根据每台服务器的权重等一些设置将请求转发到不同的服务器上去进行处理,这样的话针对一些带有状态请求的情况来说就是个很 ...

  3. java.util.ResourceBundle 读取国际化资源或配置文件

    1.定义三个资源文件,放到src的根目录下面 命名规范是: 自定义名_语言代码_国别代码.properties 默认 : 自定义名.properties   2.资源文件都必须是ISO-8859-1编 ...

  4. mysql 数据类型 枚举类型与集合类型

    字段的值只能在给定范围中选择,如单选框,多选框 enum 单选 只能在给定的范围内选一个值,如性别 sex 男male/女female   set 多选 在给定的范围内可以选择一个或一个以上的值(爱好 ...

  5. js-template-art【二】语法

    参看地址 一.模板语法 1.变量使用与输出 <% if (user) { %> <h2><%= user.name %></h2> <% } %& ...

  6. RDD的源码

    RDD是一个抽象类定义了所有RDD共有的一些属性和方法,下面介绍了主要的属性和方法. abstract class RDD[T: ClassTag]( @transient private var _ ...

  7. 手把手教你学node.js之学习使用外部模块

    学习使用外部模块 目标 建立一个 lesson2 项目,在其中编写代码. 当在浏览器中访问 http://localhost:3000/?q=alsotang 时,输出 alsotang 的 md5 ...

  8. java之类适配器

    类适配器 所谓类适配器,指的是适配器Adapter继承我们的被适配者Adaptee,并实现目标接口Target.由于Java中是单继承,所以这个适配器仅仅只能服务于所继承的被适配者Adaptee.代码 ...

  9. python按行读取文件，如何去掉换行符"\n"

    for line in file.readlines(): line=line.strip('\n')

  10. 使用Linux重定向解决nohup.out无写权限问题

    ■场景 执行nohup命令的时候,经常会出现下面这种没有写入权限的错误. nohup: ignoring input and appending output to `nohup.out'nohup: ...