vue小案例

已于 2022-11-10 13:44:45 修改
阅读量249 收藏 3
点赞数
分类专栏： vue 文章标签： vue.js javascript 前端
于 2022-11-09 19:28:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_54435916/article/details/127772986
版权

1、单选框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<input type="checkbox" v-model="disabled"/>
			<button type="button" :disabled="!disabled">下一步</button>
		</div>
		<script type="text/javascript" src="js/vue.min.js"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el:'#app',
				data:{
					disabled:false,
				}
			})
		</script>
	</body>
</html>

2、下拉框：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<form action="下拉框.html" method="">
				<select name="tid">
					<option value="">
						请选择商品
					</option>
					<option value ="" v-for="t in list" :value="t.tid" v-text="t.tname"></option>
				</select>
				<button type="submit">提交</button>
			</form>
		</div>
		
		<script type="text/javascript" src="js/vue.min.js"></script>
		<script type="text/javascript">
			new Vue({
				el:'#app',
				data:{
					list:[
						{tid:1,tname:'生活用品'},
						{tid:2,tname:'电子产品'},
						{tid:3,tname:'果蔬产品'}
					]
				}
			})
		</script>
	</body>
</html>

3、超链接

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<ul>
				<li v-for="(n,nid) in list">
					{{n.nid}}<a v-bind:href="n.ref">{{n.name}}</a>
				</li>
			</ul>
		</div>
		<script type="text/javascript" src="js/vue.min.js"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el:'#app',
				data:{
					list:[
						{nid:1,name:'十一放假了',ref:'http://www.baidu.com'},
						{nid:2,name:'放假7天',ref:'http://www.qq.com'},
					]
				}
			})
		</script>
	</body>
</html>

4、计算属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			商品名<input type="text" v-model="sname" placeholder="请输入商品名" />+
			商品价格<input type="text" v-model="sprice" placeholder="请输入价格" />=
			数量<input type="text" v-model="snum" placeholder="请输入数量" />
			<button type="submit" v-on:click="list.push({sname,sprice,snum})">添加</button>
			<table>
				<tr>
					<th>商品名</th>
					<th>商品价格</th>
					<th>数量</th>
				</tr>
				<tr v-for="v in list">
					<td>{{v.sname}}</td>
					<td>{{v.sprice}}</td>
					<td>{{v.snum}}</td>
				</tr>
			</table>
		</div>
		<script type="text/javascript" src="js/vue.min.js"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el:'#app',
				data:{
					sname:'',
					sprice:0,
					snum:0,
					list: [],
				},
				computed:{
					res:function(){
						return parseInt(this.n1) + parseInt(this.n2)
					}
				},
				methods:{
					
				}
			})
		</script>
	</body>
</html>

5、图片轮播

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<button type="button" v-on:click="i = i == 1?4:i-1"><<<</button>
			<button type="button" v-on:click="i = i == 4?1:i+1">>>></button><br>
			<img v-bind:src="'img/j'+i+'.png'" >
		</div>
		<script type="text/javascript" src="js/vue.min.js"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el:'#app',
				data:{
					i:1,
					
				}
			})
			/* setInterval(function(){
				console.log(vm)
				vm.i++;
				vm.i%=5;
			},1000) */
		</script>
	</body>
</html>

6、开关灯--show

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<!-- <button type="button" v-on:click="show=!show">{{show?'关灯':'开灯'}}</button><br>
			<img v-bind:src="show?'img/k.jpg':'img/g.jpg'" > -->
			<button type="button" v-on:click="i= i==1?0:i+1, show=!show">{{show?'开灯':'关灯'}} </button><br />
			<!-- <img v-bind:src="show ==show?'img/k.jpg':'img/g.jpg'" /> -->
			<div >
			     <img v-bind:src="'img/'+i+'.jpg'" />
				 <!-- <img v-bind:src="show?'img/k.jpg':'img/g.jpg'" /> -->
			</div>
		</div>
		<script type="text/javascript" src="js/vue.min.js"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el:'#app',
				data:{
					i:0,
					show:true,
				}
			})
		</script>
	</body>
</html>

 7、购物车

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<button type="button" @click="add()">添加</button>
			<p v-for="(s,i) in list">
				名称：<input type="text" v-model="s.sname" />
				价格：<input type="number" v-model="s.sprice" />
				数量：<input type="number" v-model="s.snum" />
				小计：<input type="number" v-model="s.sprice*s.snum" readonly="readonly"/>
				<button type="button" @click="del(i)">删除</button>
			</p>
			总计: {{total}}￥ 共: {{count}}件
		</div>
		<script type="text/javascript" src="js/vue.min.js"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el:'#app',
				data:{
					list:[],
				},
				created() {
					
				},
				computed:{
					total() {
						var sum = 0;
						this.list.forEach(function(v, i) {
							sum += v.sprice * v.snum
						})
						return sum;
					},
					count() {
						var sum = 0;
						this.list.forEach(function(v,i) {
							sum += v.snum * 1;
						})
						return sum;
					}
				},
				methods:{
					add(){
						this.list.push({
							sname:'',
							sprice: 0,
							snum: 1
						})
					},
					del(i){
						this.list.splice(i,1)
					}
				}
			})
		</script>
	</body>
</html>

8、观察者（全选 单选）--监听机制

文本框数据改变（复选框、下拉框）

监听数据的变化，从而执行的功能

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<input v-model="sprice" />
			<hr >
			<!-- 复选框全选 绑定单个值真和假 -->
			<!-- 全选把数组内容交给爱好 -->
			<input type="checkbox" v-model="qx" />全选
			<p v-for="h in list">
				<!-- 绑定数组 数据绑定-->
				<input type="checkbox" v-model="hobby" :value="h" />{{h}}
			</p>
			{{hobby}}
		</div>
	</body>
	<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var vm = new Vue({
			el: "#app",
			data: {
				sprice: 0,
				list: [
					'游戏',
					'音乐',
					'书籍',
				],
				//默认不选
				qx: false,
				hobby: [],
			},
			watch: {
				//观察谁写谁
				sprice(newval,oldval){
					//观察者监听模式
					console.log(newval,oldval)
				},
				qx(newval){
					//全选
					if(newval){
						this.hobby=this.list
					}else{ //全不选
						this.hobby=[]
					}
				}
			}
		})
	</script>
</html>

9、鼠标事件---选中高亮显示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			/* 激活  高亮显示 */
			.active{
				color: red;
				background-color: cornsilk;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<ul>
				<!-- 静态效果 -->
				<!-- <li class="active">第一项</li> -->
				
				<!-- 动态效果 has-json格式 -->
				<!-- 鼠标悬浮事件i改变，高亮显示的行就改变 -->
				<li :class="{active: i==0}" @mousemove="i=0" @mouseout="i=100">第一项</li>
				<li :class="{active: i==1}" @mousemove="i=1"  @mouseout="i=100">第二项</li>
				<li :class="{active: i==2}" @mousemove="i=2"  @mouseout="i=100">第三项</li>
			</ul>
		</div>
		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el: '#app',
				data: {
					i:0
				},
			})
		</script>
	</body>
</html>

 

奕宸Long
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
一个vue的小例子
06-26
这是一个自己写的比较精简的微信公众号，自己看看吧，
vue实例
weixin_33759269的博客
03-02 72
1、构造器 每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例 启动的： var vm = new Vue({ // 选项 }) 虽然没有完全遵循 MVVM 模式， Vue 的设计无疑受到了它的启发。因此在文档中经常会使用 vm 这个变量名表示 Vue 实例。 在实例化 Vue 时，需要传入一个选项对象，它可以包含数据、模板、挂载元素、方法、生命周期钩子等...
一个VUE的小案例
weixin_30432007的博客
04-26 68
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equ...
vue案例
qq_45387575的博客
09-19 409
关键：先将用户输入的数据，利用回车作为切割符，转换为数组后，再利用Math.random产生最忌数，来获取数组的下标，再将挑选出来的数据进行显示。textarea输入的数据，按照空格分行之后，怎么获取每个元素：this.inputdata.split('\n')怎么将date类型的input标签绑v-model的value。1、收集用输入的随机选择的个数--v-model 进行绑定。怎么将date类型的input的时间转换为时间戳。2、收集用户输入的数据--监听回车事件。计算时间戳的时候有点迷糊。
vue快速入门的三个小实例
weixin_33918114的博客
08-23 426
1.前言 用vue做项目也有一段时间了，之前也是写过关于vue和webpack构建项目的相关文章，大家有兴趣可以去看下webpack+vue项目实战（一,搭建运行环境和相关配置）（这个系列一共有5篇文章，这是第一篇，其它几篇文章链接就不贴了）。但是关于vue入门基础的文章，我还没有写过，那么今天就写vue入门的三个小实例，这三个小实例是我...
vue实现购物车小案例
12-13
本文实例为大家分享了vue实现购物车小案例的具体代码，供大家参考，具体内容如下 最终效果 HTML部分： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>...
vue简单登录小案例
04-28
这是一个简单的登录注册案例，可以让初学者更好的学习vue中的路由、路由嵌套、axios以及vuex。
【vue小案例，实现简单购物车】
最新发布
11-06
简单购物车代码
VueTab案例.rar
04-30
Vue小案例——Tab选项卡 通过v-for将数据渲染到页面中，为每个v-for渲染出来的 li 添加点击事件，运用排他思想
Vue脚手架记事本案例
10-03
总结TODOList案例： 组件化编码流程： 1.拆分静态组件：组件按照功能点拆分，命名不要与html元素冲突。 2.实现动态组件：考虑好数据的存放位置，数据是一个组件在用还是一些组件在用： （1）一个组件在用：放在组件...
vue入门小例子
07-08
学习vue.js官网时,写的几个小例子.
VUE前端小例子
03-25
VUE前端写的一个简单资产管理的小例子，里面有简单实现布局的代码。
vue小例子
qq_42243957的博客
08-04 164
**1、快速入门** <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>快速入门</title> <script src="./vuejs-2.5.16.js"></script> </head> <body> <div id="app"> {{message}} &lt
Vue小实例
weixin_30367945的博客
02-06 53
最近刚学习Vue的官方文档，了解了指令、模板、组件、数据双向绑定等有关Vue的知识点。因此估摸着做点实例出来练练手。 下面介绍一个简单的例子，模拟购物车自动统计金额，效果图如下： 代码如下： <div id="demo"> <a v-on:click="tog" class="list-group-item active">商品...
vue基本小案例
yaya1286249672的博客
03-25 668
引入文件 html内容（bootstrap） //追加输入的内容以及删除 //输入框接受主要关键词         增加//点击增加事件             {{lis}},{{i}}删除 //script内容 var vu = new Vue({ el:"#out", data:{ kw:""
vue-router 简单入门小实例
AprilCC的博客
11-06 1779
用vue.js+vue-router创建单页应用，是非常简单的。使用vue.js我们已经可以通过组合组件来组成应用程序，当需要把vue-router添加进来，我们需要做： 将组件(components)映射到路由(router),然后告诉vue-router在哪里渲染它们。 下面例子来源于Vue官方文档Getting Started，只是为了手打一遍。HTML:<script src="http
Vue案例
SunsetGirl的博客
06-28 950
三个目前掌握Vue知识的小案例
vue3.0实现小案例
05-14
好的，我来给你介绍一个用 Vue 3.0 实现的小案例。 这个案例是一个简单的待办事项列表，可以添加、删除和标记完成任务。 我们先来看一下代码实现： ```html <template> <div> <h2>待办事项列表</h2> <input type="text" v-model="newTodo" placeholder="请输入待办事项"> <button @click="addTodo()">添加</button> <ul> <li v-for="(todo, index) in todos" :key="index"> <span :class="{ done: todo.done }">{{ todo.content }}</span> <button @click="deleteTodo(index)">删除</button> <button @click="toggleDone(index)">{{ todo.done ? '未完成' : '已完成' }}</button> </li> </ul> </div> </template> <script> import { reactive } from 'vue'; export default { setup() { const state = reactive({ newTodo: '', todos: [] }); const addTodo = () => { if (state.newTodo.trim() !== '') { state.todos.push({ content: state.newTodo, done: false }); state.newTodo = ''; } }; const deleteTodo = (index) => { state.todos.splice(index, 1); }; const toggleDone = (index) => { state.todos[index].done = !state.todos[index].done; }; return { newTodo: state.newTodo, todos: state.todos, addTodo, deleteTodo, toggleDone }; } }; </script> <style> .done { text-decoration: line-through; } </style> ``` 这个案例使用了 Vue 3.0 的 Composition API，使用 `reactive` 创建响应式对象，然后在 `setup` 函数中定义了添加、删除和标记完成任务的函数，并通过 `return` 返回这些函数和响应式数据，最后在模板中使用了指令和事件监听器来实现交互效果。 如果你想要更详细的介绍，可以参考 Vue 3.0 官方文档：https://v3.vuejs.org/guide/introduction.html。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值