039——VUE中组件之子组件中data使用实例与text-xtemplate的使用方法
<!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的使用方法的更多相关文章
- Vue中，父组件向子组件传值
1:在src/components/child/文件夹下,创建一个名为:child.vue的子组件 2:在父组件中,设置好需要传递的数据 3:在App.vue中引入并注册子组件 4:通过v-bind属 ...
- VUE中父组件向子组件传递数据 props使用
VUE中,子组件是不能直接访问父组件的数据(一般来说,当然如果你要破坏原则也是可以),如下< <body> <div id="fathercomponent" ...
- Vue中父组件向子组件传值
Vue中父组件向子组件传值 相关Html: <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- 042——VUE中组件之子组件使用$on与$emit事件触发父组件实现购物车功能
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue组件中的样式属性：scoped，解决在父组件中无法修改子组件样式问题
Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范. vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当前组件元素,它是通过使 ...
- vue.js中父组件触发子组件中的方法
知识点:vue.js中,父组件的method中,触发子组件中的方法,获得子组件中的定义的属性 (1)子组件 : child_crud.js var html_child_crud= "< ...
- vue 项目， 通知子组件更新，父组件中每次点击按钮重新加载子组件，（重新生成dom 元素）
vue是组件化开发的项目,很多情况下会把公共组件提取出来,来减少代码量,提高开发效率,和以后更好的可维护性.很多情况下,父组件中都会引用子组件这种情况.通过给在父组件中引用的子组件标签上添加属性,来渲 ...
- VUe.js 父组件向子组件中传值及方法
父组件向子组件中传值 1. Vue实例可以看做是大的组件,那么在其内部定义的私有组件与这个实例之间就出现了父子组件的对应关系. 2. 父子组件在默认的情况下,子组件是无妨访问到父组件中的数据的,所以 ...
- Vue的父子组件v-model双向绑定，父组件修改子组件中绑定的v-model属性
先来看下实现的效果,父组件中有个文本框,在点击下面按钮时弹出抽屉,抽屉里也有个文本框,文本框里的初始值要和父组件的文本框同步,并且修改抽屉里的文本框值时 父组件里的文本框值也要跟着改变 网上有大概三种 ...
随机推荐
- Romantic---hdu2669（扩展欧几里德模板）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2669 详解:扩展欧几里德 #include <iostream> #include < ...
- 使用JAVA实现语音朗读一段文本
需要做的工作: 1.下载 jacob-1.17-M2 或 jacob-1.18 2.解压jacob-1.17-M2 或 jacob-1.18 3.向工程里导入jacob.jar 4.将 jacob- ...
- WMS学习笔记：1.尝试加载WMS
1.首先找一个可用的WMS栅格地图服务:http://demo.cubewerx.com/demo/cubeserv/cubeserv.cgi 获取GetCapabilities: http://de ...
- Java模板模式
模板类 package com.ietree.designpattern.template; /** * 模板类 * * @author Root */ public abstract class S ...
- MySQL server has gone away With statement: INSERT INTO `students`......
mysql出现ERROR : (2006, 'MySQL server has gone away') 的问题意思就是指client和MySQL server之间的链接断开了. 首选分析给出可能出现的 ...
- 小论“Boolean参数作为入参”的函数
<Clean Code>一书中对于如何写好函数有着很动人的描写,其中对于函数参数的建议有如下两点: 函数参数的数量应该尽可能少 给一个一元函数传入bool类型的参数很"罪恶&qu ...
- NET Framework 4.0无法安装!
win7旗舰版无法安装CAD2012,安装NET Framework 4.0的时候就出现错误,安装NET Framework 4.0单独版也无法安装出现错误. 解决方法: 1.点击电脑桌面右下角的“开 ...
- 大数据领域两大最主流集群管理工具Ambari和Cloudera Manger
不多说,直接上干货! 目前啊,都知道,大数据集群管理方式分为手工方式(Apache hadoop)和工具方式(Ambari + hdp 和Cloudera Manger + CDH). 手工部署呢, ...
- RESTful源码笔记之RESTful Framework的APIvieｗ, Viewset总结分析
0x00 引言 官方文档:http://www.django-rest-framework.org/drf为我们提供强大的通用view的功能,本博客对这些view进行简要的总结分析.首先,我们看一下 ...
- object类之toString方法
object是所有类的基类 如果没有使用extends关键字指明其基类,则默认基类为object类 public class Person{ ........ } 等价于: public class ...