标签:methods model mod 缓存 position span 子节点 button tps
<component>
用于将一个‘元组件’渲染为动态组件,以 is 属性值决定渲染哪个组件。<div id="app">
<!-- 按钮代表选项卡的标题功能 -->
<button
v-for="title in titles"
:key="title"
@click="currentCom = title"
>
{{ title }}
</button>
<!-- component 设置动态组件 -->
<component :is="currentCom"></component>
</div>
<script>
// 设置要切换的子组件选项对象
var ComA = {
template: `<p>这是组件A的内容:<input type="text"></p>`
};
var ComB = {
template: `<p>这是组件B的内容:<input type="text"></p>`
};
var ComC = {
template: `<p>这是组件C的内容:<input type="text"></p>`
};
new Vue({
el: ‘#app‘,
data: {
// 所有组件名称
titles: [‘ComA‘, ‘ComB‘, ‘ComC‘],
// 当前组件名称
currentCom: ‘ComA‘
},
components: {
ComA, ComB, ComC
}
});
</script>
<div id="app">
<button
v-for="title in titles"
:key="title"
@click="currentCom = title"
>
{{title}}
</button>
<!-- 通过 include 设置哪些组件会被缓存 -->
<!-- <keep-alive include="ComA,ComB,ComC"> -->
<!-- <keep-alive :include="[‘ComA‘, ‘ComB‘, ‘ComC‘]"> -->
<!-- <keep-alive :include="/Com[ABC]/"> -->
<!-- 通过 exclude 设置哪些组件不会被缓存 -->
<!-- <keep-alive exclude="ComD"> -->
<!-- <keep-alive :exclude="[‘ComD‘]"> -->
<!-- <keep-alive :exclude="/ComD/"> -->
<keep-alive max="2">
<!-- 动态组件 -->
<component :is="currentCom"></component>
</keep-alive>
</div>
<script>
var ComA = {
template: `
<div>
请选择主食:
<br>
<label for="mantou">馒头:</label>
<input id="mantou" type="radio" name="zhushi" value="mantou">
<br>
<label for="mifan">米饭:</label>
<input id="mifan" type="radio" name="zhushi" value="mifan">
</div>
`
};
var ComB = {
template: `
<div>
请选择菜品:
<br>
<label for="luobo">炒萝卜:</label>
<input id="luobo" type="checkbox" name="cai" value="luobo">
<br>
<label for="niurou">炒牛肉:</label>
<input id="niurou" type="checkbox" name="cai" value="niurou">
<br>
<label for="pingguo">炒苹果:</label>
<input id="pingguo" type="checkbox" name="cai" value="pingguo">
</div>
`
};
var ComC = {
template: `
<div>
请选择汤:
<br>
<label for="tang1"">西红柿鸡蛋汤:</label>
<input id="tang1"" type="radio" name="tang" value="tang1"">
<br>
<label for="tang2">紫菜蛋花汤:</label>
<input id="tang2" type="radio" name="tang" value="tang2">
<br>
<label for="tang3">清汤</label>
<input id="tang3" type="radio" name="tang" value="tang3">
</div>
`
};
var ComD = {
template: `
<div>
请输入支付信息:
<br>
<label for="account"">请输入账号:</label>
<input id="account"" type="text" name="account">
<br>
<label for="password">请输入密码:</label>
<input id="password" type="password" name="password">
<br>
</div>
`
};
new Vue({
el: ‘#app‘,
data: {
titles: [‘ComA‘, ‘ComB‘, ‘ComC‘, ‘ComD‘],
currentCom: ‘ComA‘
},
components: {
ComA, ComB, ComC, ComD
}
});
</script>
用于在 Vue 插入、更新或者移除 DOM 时, 提供多种不同方式的应用过渡、动画效果。
<style>
/* 用于设置出场的最终状态 */
.v-leave-to {
opacity: 0;
}
/* 用于设置过渡的执行过程 */
.v-leave-active {
transition: opacity 1s;
}
/* 用于设置入场的初始状态 */
.v-enter {
opacity: 0;
}
/* 用于设置入场的最终状态 */
.v-enter-to {
opacity: 0.5;
}
/* 用于设置入场的过程 */
.v-enter-active {
transition: all 1s;
}
</style>
<div id="app">
<button @click="show = !show">切换</button>
<transition>
<p v-if="show">hello world</p>
</transition>
</div>
<script>
new Vue({
el: ‘#app‘,
data: {
show: true
}
});
</script>
<style>
/* 第一组过渡效果设置 */
.v-enter, .v-leave-to {
opacity: 0;
}
.v-enter-active, .v-leave-active {
transition: opacity .5s;
}
/* 第二组过渡效果设置 */
.demo-enter, .demo-leave-to {
opacity: 0;
transform: translateX(200px);
}
.demo-enter-active, .demo-leave-active {
transition: all .5s;
}
</style>
<div id="app">
<button @click="show = !show">切换1</button>
<!-- 没有设置 name 命名的 transition 组件,类名采用 v- 前缀 -->
<transition appear>
<p v-if="show">这是要切换的元素1</p>
</transition>
<br>
<button @click="showDemo = !showDemo">切换2</button>
<!-- 设置了 name 的 transition 组件,类名需要将 v- 修改为 demo- -->
<transition
name="demo"
appear
>
<p v-if="showDemo">这是要切换的元素2</p>
</transition>
</div>
<script>
new Vue({
el: ‘#app‘,
data: {
show: true,
showDemo: true
}
});
</script>
<style>
.v-enter, .v-leave-to {
opacity: 0;
}
.v-enter-active, .v-leave-active {
transition: all .5s;
}
.test {
transition: all 3s;
}
</style>
<div id="app">
<button @click="show = !show">切换</button>
<transition
enter-active-class="test"
leave-active-class="test"
>
<p v-if="show">这是 p 标签</p>
</transition>
</div>
<script>
new Vue({
el: ‘#app‘,
data: {
show: true
}
});
</script>
<transition-group>
用于给列表统一设置过渡动画。<span>
。<style>
ul {
position: relative;
}
.v-enter, .v-leave-to {
opacity: 0;
transform: translateX(100px);
}
.v-enter-active, .v-leave-active {
transition: all .5s;
}
/* 让元素在离场的过程中脱离标准流 */
.v-leave-active {
position: absolute;
}
.v-move {
transition: all .5s;
}
</style>
<div id="app">
<input type="text"
v-model="newTitle"
@keyup.enter="addItem"
>
<transition-group
tag="ul"
>
<li
v-for="item in items"
:key="item.id"
@click="removeItem(item)"
>
{{ item.title }}
</li>
</transition-group>
</div>
<script>
new Vue({
el: ‘#app‘,
data: {
items: [
{ id: 1, title: ‘示例内容1‘},
{ id: 2, title: ‘示例内容2‘},
{ id: 3, title: ‘示例内容3‘},
{ id: 4, title: ‘示例内容4‘},
{ id: 5, title: ‘示例内容5‘},
],
newTitle: ‘‘,
latestId: 5
},
methods: {
addItem () {
this.items.push({
id: this.latestId + 1,
title: this.newTitle
});
this.latestId++;
this.newTitle = ‘‘;
},
removeItem (item) {
var i = this.items.indexOf(item);
this.items.splice(i, 1);
}
}
});
</script>
如果你已经下定决心要转行做编程行业,在最开始的时候就要对自己的学习有一个基本的规划,还要对这个行业的技术需求有一个基本的了解。有一个已就业为目的的学习目标,然后为之努力,坚持到底。如果你有幸看到这篇文章,希望对你有所帮助,祝你找到满意的工作。
不管你是零基础的萌新,还是想转行的小伙伴 ,只要你想了解前端,精通前端,都欢迎你们加入我们的前端自学团。
在这里,你可以找到志同道合的朋友,相互激励的学习伙伴,还能得到大神的经验分享,和加入项目实战的机会。 想加入自学团的小伙伴赶快行动起来吧 ~
想学习前端web和需要PDF文档的朋友都可以加入这边的企鹅裙,前面:938,,中间:051,,最后:673
裙里从学生到大佬都有,还有资源免费分享,不见不散哦!
标签:methods model mod 缓存 position span 子节点 button tps
原文地址:https://www.cnblogs.com/qianduanpiaoge/p/14723311.html