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属性
先来看下实现的效果,父组件中有个文本框,在点击下面按钮时弹出抽屉,抽屉里也有个文本框,文本框里的初始值要和父组件的文本框同步,并且修改抽屉里的文本框值时 父组件里的文本框值也要跟着改变 网上有大概三种 ...
随机推荐
- flask实现api
https://www.cnblogs.com/vovlie/p/4178077.html from flask import Flask, jsonify app = Flask(__name__) ...
- 迅雷7 纯净版v7.9.18.4724
http://soft2.xzstatic.com/2016/08/Thunder_7.9.13.4666_NoAD_VIP.exe http://www.downza.cn/soft/192064. ...
- R语言apply()函数用法
在R语言的帮助文档里,apply函数的功能是: Retruns a vector or array or list of values obtained by applying a function ...
- linux下高并发网络应用注意事项
本文转自:http://www.blogjava.net/bacoo/archive/2012/06/11/380500.html linux下高并发网络应用注意事项 vi /etc/sysctl.c ...
- Android ANR异常及解决方法
1,首先是查看log: 2,再看trace.txt; 3,看源码: 4,仔细分析ANR的原.
- jQuery：$(document).ready()用法
jQuery:$(document).ready()用法 $(document).ready() 方法允许我们在文档完全加载完后执行函数;
- 20145118 《Java程序设计》第1周学习总结
20145118 <Java程序设计>第1周学习总结 教材学习内容总结 由于寒假在家已经安装了java开发工具,所以安装过程在这里不再赘述.这一周我开始了Java初学阶段,从Java的历史 ...
- 关于Cooperation.GTST
Cooperation.GTST团队项目简介 我们打算利用Android Studio开发一款博客园的Android APP,初步设想能够实现在Android手机平台使用博客园的相关功能,后续想法会在 ...
- Ubuntu Budgie 18.04 是最好的Remix【转】
本文转载子:https://www.linuxidc.com/Linux/2018-05/152223.htm [日期:2018-05-05] 来源:Linux公社 作者:醉落红尘 [字体:大 中 ...
- Mysql加锁处理分析-基于InnoDB存储引擎
MVCC MySQL INNODB存储引擎,实现的是基于多版本的并发控制协议——MVCC (Multi-VERSION Concurrency Control).MVCC最大的好处,相信也是耳熟能详: ...