created_demo1示例
<template> <div style="color: white;font-size: 3rem"> {{ShowText}} </div> </template> <script> export default { name:"demo1", data:function(){ return { StrArray: ["北京第三区交通委提醒您：", "道路千万条，", "安全第一条，", "行车不规范，", "亲人两行泪。" ], index: 0, ShowText: "" } }, created() { //复制自己，方便修改 var _this = this; _this.ShodText = _this.StrArray[0]; setInterval(() => { _this.index++; if (_this.index == 5) { _this.index = 0; } _this.ShowText = this.StrArray[_this.index]; }, 2000); } } </script> <style> #app { line-height: 200px; width: 600px; height: 200px; background-color: skyblue; border-radius: 20px; text-align: center; transition: 5s all; } #app:hover { transition: 5s all; background-color: pink; border-radius: 50%; border: 5px double red; } </style>
created_demo2示例
<template> <div style="color: white;font-size: 1.5rem"> {{ShowText}} </div> </template> <script> export default { name:"demo1", data:function(){ return { ShowText: "" } }, created() { //复制自己，方便修改 setInterval(() => { var times = "当前时间:"; var d = new Date(); var year = d.getFullYear(); var month = (d.getMonth() + 1).toString().padStart(2, '0'); var day = d.getDate().toString().padStart(2, '0'); var hour = d.getHours().toString().padStart(2, '0'); var min = d.getMinutes().toString().padStart(2, '0'); var se = d.getSeconds().toString().padStart(2, '0'); this.ShowText = times + year + "-" + month + "-" + day + " " + hour + ":" + min + ":" + se; }, 1000); } } </script> <style> #app { line-height: 200px; width: 600px; height: 200px; background-color: skyblue; border-radius: 20px; text-align: center; transition: 5s all; } #app:hover { transition: 5s all; background-color: pink; border-radius: 50%; border: 5px double red; } </style>
filters_demo3
<template> <div> <input type="text" v-model="InText" placeholder="请输入过滤词" /> <p>{{InText | FilterInText}}</p> </div> </template> <script> export default { name:"demo1", data:function(){ return { InText: "" } }, filters: { FilterInText: function(o) { return o.replace('傻', '*'); } } } </script> <style> #app { line-height: 200px; width: 600px; height: 200px; background-color: skyblue; border-radius: 20px; text-align: center; transition: 5s all; } #app:hover { transition: 5s all; background-color: pink; border-radius: 50%; border: 5px double red; } </style>
v-once v-text_demo4
<template> <div> <input type="text" v-model="Msg" /> <p>{{Msg}}</p> <p v-once>{{Msg}}</p> <p v-text>{{Msg}}</p> </div> </template> <script> export default { name:"demo1", data:function(){ return { Msg: "远方的梦想" } } } </script> <style> #app { line-height: 200px; width: 600px; height: 200px; background-color: skyblue; border-radius: 20px; text-align: center; transition: 5s all; } #app:hover { transition: 5s all; background-color: pink; border-radius: 50%; border: 5px double red; } </style>
数据类型demo5
parseInt格式化整数类型
<template> <div> <fieldset> <legend>个人工资计算器</legend> <p>基本工资：<input type="text" v-model="a1" /></p> <p>岗位工资：<input type="text" v-model="a2" /></p> <p>月度奖金：<input type="text" v-model="a3" /></p> <p>综合补贴：<input type="text" v-model="a4" /></p> <p>扣款金额：<input type="text" v-model="a5" /></p> <p>应发工资：{{parseInt(a1)+parseInt(a2)+parseInt(a3)+parseInt(a4)-parseInt(a5)}}元</p> </fieldset> </div> </template> <script> export default { name:"demo1", data:function(){ return { a1: 0, a2: 0, a3: 0, a4: 0, a5: 0 } } } </script> <style> #app:hover { transition: 5s all; background-color: pink; border-radius: 50%; border: 5px double red; } </style>
v-bind_demo6
“:” 是指令 “v-bind”的缩写
<template> <div> <img :src="img1" :style="sty1" /> </div> </template> <script> export default { name:"demo1", data:function(){ return { img1: "https://ucc.alicdn.com/images/user-upload-01/2ef5964ce6c641da87db1a4419aa07d8.png", sty1: "width:250px;height:400px;border-radius:50%" } } } </script> <style> #app:hover { transition: 5s all; background-color: pink; border-radius: 50%; border: 5px double red; } </style>
:class_demo7
绑定样式
<template> <div> <input type="checkbox" v-model="state1" />文字颜色 <input type="checkbox" v-model="state2" />背景颜色 <input type="checkbox" v-model="state3" />文字大小 <input type="checkbox" v-model="state4" />边框 <input type="checkbox" v-model="state5" />边框圆角 <input type="checkbox" v-model="state6" />居中 <hr/> <p v-bind:class="{co:state1,bgc:state2,fs:state3,bor:state4,boru:state5,cen:state6}">风云·雄霸天下</p> </div> </template> <script> export default { name:"demo1", data:function(){ return { state1: false, state2: false, state3: true, state4: false, state5: false, state6: false } } } </script> <style> .co { color: red; transition: 2s all; } .bgc { background-color: pink; transition: 2s all; } .fs { font-size: 2rem; transition: 2s all; } .bor { border: 2px solid skyblue; transition: 2s all; } .boru { border-radius: 50px; transition: 2s all; } .cen { text-align: center; transition: 2s all; } </style>
图片轮播_demo8
图片会每2.5秒更换一张
<template> <div> <img :src="url" style="width:400px;height:400px;" /> </div> </template> <script> export default { name:"demo1", data:function(){ return { UrlArray: [ "https://ucc.alicdn.com/images/user-upload-01/2ef5964ce6c641da87db1a4419aa07d8.png", "https://gd-hbimg.huaban.com/62272f15b1e5688d34dbda4329aca2e87a3c4cb02755e-m4GyqS_fw240webp", "https://gd-hbimg.huaban.com/da6369148e013233f191a9b0a0ce8b64c94d52871a9e8b-oA9BTm_fw240webp", "https://gd-hbimg.huaban.com/38da95669436902fe92a34b5af6a67ca777d1a372d477-U83Ijg_fw240webp", "https://gd-hbimg.huaban.com/eb68b53436241e3003fa350b4ca2fb8c55cf224145f3a8-UA4z33_fw240webp", "https://gd-hbimg.huaban.com/a92746f0400e6af2aa863866343abc60e4fbd1cd24126-CCihy1_fw240webp", "https://gd-hbimg.huaban.com/9830dc6dbba93ca8f2b3cf9a4acfa520d239948936cdb-L7wsf7_fw240webp", "https://gd-hbimg.huaban.com/f8b0a09bddb0f0d2336297ef2d1dddacc348881e95d34-GVgBa3_fw240webp", "https://gd-hbimg.huaban.com/c30cc07930dd1836ed5bb80f66594925c010aa3f12670-RcYPuu_fw240webp", "https://gd-hbimg.huaban.com/19245080ce098c73b47ae37384263b8ff603d4c3df3394-N9O7Qs_fw240webp", "https://gd-hbimg.huaban.com/11cc94621656f786002448c5007d259bb6397bf1d221-W9p8JJ_fw240webp", "https://gd-hbimg.huaban.com/d60130b066cd98f81cb3fd852d2c3504d4ce5cd8388f8-oKCIke_fw240webp" ], index: 0, url: "" } }, created() { //影分身之术 var _this = this; _this.url = _this.UrlArray[0]; //判断循环 setInterval(() => { _this.index++; if (_this.index == _this.UrlArray.length) { _this.index = 0; } _this.url = _this.UrlArray[_this.index]; }, 2500); } } </script>
v-if v-else——demo9
<template> <div> <input type="checkbox" v-model="isf">登录/注册<br/> <hr/> <div v-if="isf"> <p> 账号:<input type="text" placeholder="请输入账号" /> </p> <p> 密码:<input type="text" placeholder="请输入密码" /> </p> <p> 二次密码:<input type="text" placeholder="请输入二次密码" /> </p> <p><button>注册</button></p> </div> <div v-else> <p> 账号:<input type="text" placeholder="请输入账号" /> </p> <p> 密码:<input type="text" placeholder="请输入密码" /> </p> <p><button>登录</button></p> </div> </div> </template> <script> export default { name:"demo1", data:function(){ return { isf: false } } } </script>
按钮事件——demo10
<template> <div> <p v-on:click="test1">你是一个好人</p> <p v-on:click="test2">你是俩个好人</p> </div> </template> <script> export default { name:"demo1", data:function(){ }, methods: { test1: function() { alert("你确定是一个好人，但是咱们不合适。"); }, test2: function() { alert("你确定是两个好人，但是咱们不合适。"); } } } </script>
选项卡demo11
<template> <div id="show"> <div class="divs"> <!--选项卡一--> <div class="btn" v-on:click="choose(1)">选项卡一</div> <!--选项卡二--> <div class="btn" v-on:click="choose(2)">选项卡二</div> </div> <div style="clear:both"></div> <div id="one" style="color: red">我是选项卡一的内容</div> <div id="two" style="color: skyblue;display: none;">我是选项卡二的内容</div> </div> </template> <script> export default { name:"demo1", data:function(){ }, created() { document.getElementById("two").style.display = ""; }, methods: { choose: function(o) { if (o == "1") { document.getElementById("one").style.display = ""; document.getElementById("two").style.display = "none"; } else { document.getElementById("one").style.display = "none"; document.getElementById("two").style.display = ""; } } } } </script> <style> #show{ width:80%; font-size: 1.2rem; } .divs div { float: left; } .btn{ border:1px solid red; margin-left: 50px; } #one,#two{ border:1px solid black; height: 200px; } </style>
