vue3知识点2命令v-if v-show v-for v-bind v-on @ watch全部代码

最新推荐文章于 2024-06-22 18:03:45 发布

luanmabug

最新推荐文章于 2024-06-22 18:03:45 发布

阅读量343

点赞数

分类专栏： vue基础文章标签： html javascript vue vue.js

本文链接：https://blog.csdn.net/yangyangdt/article/details/122021120

版权

vue3知识点链接

vue2写法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>vue2入门基础</title>
		<script src="js/vue.js"></script>
		<style type="text/css">
			.red{
     
				color: red;
			}
			.green{
     
				color: green;
			}
			.bgyellow{
     
				background-color: yellow;
			}
		</style>
	</head>
	<body>
		
		<div id="app">
			<!--1.使用vue开发的好处：体积小，数据双向绑定，有很多成熟的组件。-->
			
			<!--1.v-if：控制元素的显示与隐藏  ,（通过移除dom标签控制，用于只判断一次的（例如刚进页面时）-->
			<!--哪个为真显示哪个，三者中间不能有别的标签-->
			<p v-if="istrue==0">{
  {pop}}</p>
			<p v-else-if="istrue==1">1.{
  {pop}}</p>
			<p v-else></p>
			
			<!--2.v-show :控制元素的显示与隐藏（通过控制样式display：none）---用于频繁切换显示与隐藏。-->
			<p v-show="show">2.我是v-show</p>
			
			<!--3.v-if 与v-show的另一个区别：v-if可以用于虚拟的template标签里面，v-show不可以，因为虚拟标签无样式-->
			<template v-if="show">3.v-if 与v-show的另一个区别template</template><br />

			<!--4.v-on 简写@，用于触发点击事件等事件-->
			
			<button @click="handleclick">4.点击v-on</button><br />
			<button @click="handleclick1($event)">4.点击v-on</button><br />
			
			<!--5.v-for 遍历，v-for的item in arr==item of arr -->5.v-for 遍历
			
			<!--1）.数组-->
			<ul>
				<li v-for="(item,index) in arr">{
  {item}}---{
  {index}}</li>
			</ul>
			<!--2）.对象-->
			<ul>
				<li v-for="(value,key) in obj">{
  {value}}--{
  {key}}</li>
			</ul>
			<!--3) 数字遍历-->
			<ul>
				<li v-for="item in 4">{
  {item}}</li>
			</ul>
			<!--4）字符串遍历-->
			<ul>
				<li v-for