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属性
先来看下实现的效果,父组件中有个文本框,在点击下面按钮时弹出抽屉,抽屉里也有个文本框,文本框里的初始值要和父组件的文本框同步,并且修改抽屉里的文本框值时 父组件里的文本框值也要跟着改变 网上有大概三种 ...
随机推荐
- MTA---smtp(25,postfix,sendmail),Pop3(110,Devocot), MUA(foxmail) IMAP(server,client rsync)
利用telnet进行SMTP的验证 =========先计算BASE64编码的用户名密码,认证登录需要用到=========== [crazywill@localhost crazywill]$ pe ...
- CMDB内功心法，助我登上运维之巅
很多70.80后甚至90后都在金庸.古龙.梁羽生先生等武林大家熏陶下成长的,这么多年过去了,我的武侠梦依然不曾散去.曾几何,梦想有一天练就一身绝学,搂着小师妹花前月下,仗剑走天涯,快意人生.可每次的酣 ...
- Day01 html详解
day01 html详解 1.html的简介 1.1 什么是html? - HyperText Markup Language:超文本标记语言,网页语言 ...
- 利用CombineFileInputFormat把netflix data set 导入到Hbase里
版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/xiewenbo/article/details/25637931 package com.mr.te ...
- Underscore.js (1.7.0)-函数预览
集合(Collections)(25) - each - map - reduce - reduceRight - find - filter - where - findWhere - reject ...
- Spark Shuffle（一）ShuffleWrite:Executor如何将Shuffle的结果进行归并写到数据文件中去（转载）
转载自:https://blog.csdn.net/raintungli/article/details/70807376 当Executor进行reduce运算的时候,生成运算结果的临时Shuffl ...
- java的==和equal的区别（一）
java的==和equal的区别 “==”是用来比较两个String对象在内存中的存放地址是否相同的.例如, 1 2 3 4 5 6 7 8 9 String test1 = "test&q ...
- 内置函数——format
说明: 1. 函数功能将一个数值进行格式化显示. 2. 如果参数format_spec未提供,则和调用str(value)效果相同,转换成字符串格式化. >>> format(3.1 ...
- 文件下载—SSH框架文件下载
1.准备下载的api组件 <dependency> <groupId>commons-io</groupId> <artifactId>commons- ...
- Android 自定义View-字母索引表（一）
在有些Android应用中,为了方便快速定位,经常会看到屏幕右侧有一个字母索引表,今天尝试使用自定义View的方式实现了索引表的基本布局. 字母索引表的样式如下面的示意图所示, 此时我们至少需要知道以 ...