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属性
先来看下实现的效果,父组件中有个文本框,在点击下面按钮时弹出抽屉,抽屉里也有个文本框,文本框里的初始值要和父组件的文本框同步,并且修改抽屉里的文本框值时 父组件里的文本框值也要跟着改变 网上有大概三种 ...
随机推荐
- describe neural networks as a series of computational steps via a directed graph.
https://www.microsoft.com/en-us/research/product/cognitive-toolkit/ https://github.com/microsoft/cnt ...
- Drawing Graphs using Dot and Graphviz
Drawing Graphs using Dot and Graphviz Table of Contents 1. License 2. Introduction 2.1. What is DOT? ...
- 信号（Django信号、Flask信号、Scrapy信号）
简介 Django.Flask.scrapy都包含了一个“信号分配器”,使得当一些动作在框架的其他地方发生的时候,解耦的应用可以得到提醒. 通俗来讲,就是一些动作发生的时候,信号允许特定的发送者去提醒 ...
- Spark checkpoint机制简述
本文主要简述spark checkpoint机制,快速把握checkpoint机制的来龙去脉,至于源码可以参考我的下一篇文章. 1.Spark core的checkpoint 1)为什么checkpo ...
- PAT 1080 Graduate Admission[排序][难]
1080 Graduate Admission(30 分) It is said that in 2011, there are about 100 graduate schools ready to ...
- PAT 1046 Shortest Distance[环形][比较]
1046 Shortest Distance(20 分) The task is really simple: given N exits on a highway which forms a sim ...
- Selenium之IE浏览器的启动问题及解决
前面有篇文章说到启动IE浏览器时,会出现以下错误提示: 浏览器启动之后,页面不会自动输入代码设置的地址,如下图展示 查看报错语句,发现原来是浏览器比例调的不正确,修改浏览器比例为100%即可解决该问题
- 运行javac 报告javac不是内部或外部命令，但是运行java、java-version正常
以前装jdk 从来没遇到过今天这种情况,各种解决办法试了一下午,终于出来了,说一下解决的办法: JAVA_HOME .classpath 都在系统变量中建立好: java_home 添加jdk的安装目 ...
- Linux内核分析 02
二,操作系统是如何工作的 1.函数调用堆栈 三大法宝:存储程序计算机 函数调用堆栈 中断机制 堆栈:是C语言程序运行时必须的一个记录调用路径和参数的空间.是计算机内部现成的东西,我们直接使用. 包括函 ...
- 20145204《Java程序设计》第5周学习总结
20145204<Java程序设计>第5周学习总结 教材学习内容总结 语法与继承构架 我们之前接触到的C通常都是将程序流程和错误处理混在一起,在编写程序的时候必须考虑可能出现的错误并提前做 ...