Vue的基础学习

最新推荐文章于 2023-11-03 16:30:00 发布
最新推荐文章于 2023-11-03 16:30:00 发布
阅读量352 收藏
点赞数
分类专栏： java 文章标签： vue vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Java_Fly1/article/details/106172565
版权

Vue的基础学习

Vue实例的创建

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="root">{{msg}}</div>
		<script type="text/javascript">
		/* 通过new Vue({});创建Vue的实例 */
			new Vue({
				el:'#root',//绑定页面元素(挂载点)
				data:{
					msg:'Hello World'
				}
			});
		</script>
	</body>
</html>

挂载点、模板、实例之间的关系

挂载点：vue实例中el绑定的dom元素
代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="root">{{msg}}</div>
		<script>
			new Vue({
				el:'#root',//绑定页面元素(挂载点)
				data:{
					msg:'Hello World'
				}
			});
		</script>
	</body>
</html>

模板：
vue的实例默认的模板就是挂载点的内部内容指定了模板，那就会覆盖默认的模板而使用指定的

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="root">{{msg}}</div>
		<script>
			new Vue({
				el:'#root',
				//{{}}:vue的插值表达式
				template:'<h1>{{msg}}</h1>',//指定模板
				data:{
					msg:'Hello World'
				}
			});
		</script>
	</body>
</html>

页面显示
在这里插入图片描述

vue实例中的数据、事件和方法

加载数据的方法：
1、插值表示 {{}}
2、v-text:将内容进行转义
3、v-html：不会转义
事件：
写在Vue实例下的methods方法下
v-on:click=“handleClick” 或者 @click=“handleClick”

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="root">
			<h1 v-text="content"></h1>
			<div v-html="content" @click="handleClick"></div>
		</div>
		<script>
			new Vue({
				el:'#root',
				data:{
					msg:'Hello World',
					number:123,
					content:"<h1>hello</h1>"
				},
				methods:{
					handleClick:function(){
						this.content="word";
					}
				}
			});
		</script>
	</body>
</html>

属性绑定和双向数据绑定

属性绑定

属性绑定v-bind:属性名
v-bind:title也可以简写为:title
代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>属性绑定和双向数据绑定</title>
		<script src="js/vue.js" charset="utf-8"></script>
	</head>
	<body>
		<div id="root">
			<div  :title="title">hello world</div>
			<input :value="title"/>
		</div>
		<script>
			new Vue({
				el:'#root',
				data:{
					title:'this is hello world'
				}
			});
		</script>
	</body>
</html>

页面显示
在这里插入图片描述
鼠标放上去显示this is hello world

双向数据绑定

使用v-model

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/vue.js" charset="utf-8"></script>
	</head>
	<body>
		<div id="root">
			<input v-model="title"/>
			<div>{{title}}</div>
		</div>
		<script>
			new Vue({
				el:'#root',
				data:{
					title:'this is hello world'
				}
			});
		</script>
	</body>
</html>

页面显示
在这里插入图片描述
input输入框内容发送变化时，div内容也自动发生变化

计算属性和侦听器

计算属性都以函数的形式写在 Vue 实例内的 computed 选项内，最终返回计算后的结果。
computed 是有缓存的，如果属性值没有发生变化，直接返回缓存中存储的数据
当遍历大数组和做大量计算时，应当使用计算属性，除非不希望得到缓存；
当需要数据实时发生变化时，适合用 methods
监听属性实验使用 watch，可以通过 watch 来监听响应数据的变化

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计算属性与侦听器</title>
		<script src="js/vue.js" charset="utf-8"></script>
	</head>
	<body>
		<div id="root">
			姓：<input v-model="firstname">
			名<input v-model="lastname" />
			<div>{{fullName}}</div>
			<div>{{count}}</div>
		</div>
		<script>
			new Vue({
				el: '#root',
				data: {
					firstname: '',
					lastname: '',
					count: 0
				},
				//计算属性
				computed: {
					fullName: function() {
						return this.firstname + " " + this.lastname;
					}
				},
				//监听器
				watch: {
					/* 监听属性fullName */
					fullName:function(){
						return this.count++;
					}
				}

			});
		</script>
	</body>
</html>

页面显示
在这里插入图片描述

v-if,v-show,v-for

v-if指令的参数为true,所在的元素显示，否则则不显示
v-if:式对dom元素的重建与销毁
带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性：display
vue官网对v-if和v-show的区别与介绍

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="root">
			<div v-if="show">v-if的显示与隐藏</div>
			<button @click="toggle">toggle</button>
			<div v-show="hide">v-show的显示与隐藏</div>
			<button @click="hideToggle">v-show的toggle</button>
		</div>
		<script type="text/javascript">
			new Vue({
				el: '#root',
				data: {
					show: true,
					hide:true
				},
				methods: {
					toggle: function() {
						this.show=!this.show;
					},
					hideToggle:function(){
						this.hide=!this.hide;
					}
				}
			});
		</script>
	</body>
</html>

页面显示：
在这里插入图片描述
点击toggle按钮，页面v-if所在的dom元素被移除，只显示
如下视图：
在这里插入图片描述
点击v-show的toggle按钮，v-show所在的dom元素只是添加css属性display:none;
在这里插入图片描述

v-for列表的渲染

vue官网的介绍

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" ></script>
	</head>
	<body>
		<div id="root">
			<!-- item 则是被迭代的数组元素的别名。
			 index,数组下标的索引，
			 arr:被遍历的对象或数组
			 :key:便于对数组进行排序，并且会移除key中不存在的元素
			 -->
			<li v-for="(item,index) in arr" :key="item">{{item}}</li>
		</div>
		<script>
			new Vue({
				el:'#root',
				data:{
					arr:[1,2,3]
				}
			});
		</script>
	</body>
</html>

页面显示
在这里插入图片描述

TodoList功能

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" ></script>
	</head>
	<body>
		<div id="root">
			<div>
				<input v-model="inputVaule">
				<button @click="submit">提交</button>
				<button @click="del(inputVaule)">删除</button>
			</div>
			<ul>
				<li v-for="(item,index) in arr" :key="index">{{item}}</li>
			</ul>
		</div>
		<script>
			new Vue({
				el:'#root',
				data:{
					inputVaule:'',
					arr:[]
				},
				methods:{
					submit:function(){
						this.arr.push(this.inputVaule);
						this.inputVaule='';
					},
					del(inputVaule){
						this.arr.pop(inputVaule);
						this.inputVaule='';
					}
				}
			});
		</script>
	</body>
</html>

页面显示：
在这里插入图片描述
输入框输入1，点击提交按钮，页面显示如下：
在这里插入图片描述
输入框输入1，点击删除按钮，页面显示如下：
在这里插入图片描述

TodoList使用组件的方式改写

全局注册TodoList组件与使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" ></script>
	</head>
	<body>
		<div id="root">
			<div>
				<input v-model="inputValue"/>
				<button @click="handleSubmit">提交</button>
			</div>
			<ul>
			<!--使用全局组件todo-list-->
				<todo-list></todo-list>
			</ul>
		</div>
		<script>
			/* 全局组件的定义 */
			 Vue.component('todo-list',{
			 	template:'<li>item</li>'
			 });
			new Vue({
				el:'#root',
				data:{
					inputValue:'',
					list:[]
				},
				methods:{
					handleSubmit:function(){
						
					}
				}
			});
		</script>
	</body>
</html>

局部组件的注册与使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" ></script>
	</head>
	<body>
		<div id="root">
			<div>
				<input v-model="inputValue"/>
				<button @click="handleSubmit">提交</button>
			</div>
			<ul>
			<!--使用组件-->
				<todo-list></todo-list>
			</ul>
		</div>
		<script>
			/* 局部组件的定义 */
			var toDoList={
				template:'<li>item</li>'
			};
			new Vue({
				el:'#root',
				data:{
					inputValue:'',
					list:[]
				},
				/*注册局部组件*/
				components:{
				//组件名称：组件内容
					'todo-list':toDoList
				},
				methods:{
					handleSubmit:function(){
						
					}
				}
			});
		</script>
	</body>
</html>

使用全局注册组件的方式改写todolist

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" ></script>
	</head>
	<body>
		<div id="root">
			<div>
				<input v-model="inputValue"/>
				<button @click="handleSubmit">提交</button>
			</div>
			<ul>
				<!-- 通过属性传递值 -->
				<todo-list v-for="(item,index) of list" :key="index" :content="item">
					{{item}}
				</todo-list>
			</ul>
		</div>
		<script>
			/* 全局组件的定义 */
			Vue.component('todo-list',{
				template:'<li>{{content}}</li>',
				props:['content']//接收从外部传递过来的值
			});
			new Vue({
				el:'#root',
				data:{
					inputValue:'',
					list:[]
				},
				methods:{
					handleSubmit:function(){
						this.list.push(this.inputValue);
						this.inputValue='';
					}
				}
			});
		</script>
	</body>
</html>

页面样式：

在这里插入图片描述
输入框输入12，点击提交按钮，输入框内容被清空，下方显示列表12，如下图
在这里插入图片描述
在这里插入图片描述

组件与实例的关系

每个组件都是一个Vue的实例，里面也可以进行方法的定义
每个vue实例就是组件

todolist的删除

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" ></script>
	</head>
	<body>
		<div id="root">
			<div>
				<input v-model="inputValue"/>
				<button @click="handleSubmit">提交</button>
			</div>
			<ul>
				<!-- 通过属性传递值 -->
				<todo-list v-for="(item,index) of list" :key="index" :content="item" :index="index"
				@delete="handleDelete">
					{{item}}
				</todo-list>
			</ul>
		</div>
		<script>
			/* 全局组件的定义 */
			Vue.component('todo-list',{
				props:['content','index'],//接收从外部传递过来的值
				/* @click='del',绑定的是组件上的方法，所以方法是在组件的methods:中定义的 */
				template:'<li @click="del">{{content}} {{index}}</li>',
				methods:{
					del:function(){
						/* this.$emit()触发当前实例上的事件。附加参数都会传给监听器回调 */
						this.$emit('delete',this.index);
					}
				}
			});
			new Vue({
				el:'#root',
				data:{
					inputValue:'',
					list:[]
				},
				methods:{
					handleSubmit:function(){
						this.list.push(this.inputValue);
						this.inputValue='';
					},
					handleDelete:function(index){
						this.list.splice(index,1);
					}
					
				}
			});
		</script>
	</body>
</html>

页面显示如下：
在这里插入图片描述
输入框输入值，点击提交按钮，页面显示如下：
在这里插入图片描述
点击列表项，当前列表项删除，

Vue-cli

vue脚手架工具，快速完成vue工程级的开发

  1. 全局安装vue-cli
npm install --gloabal vue-cli
  1. 创建一个基于webpack模板的新项目
vue init webpack my-project

在这里插入图片描述
3. 安装依赖，运行项目

cd my-project
npm run dev

4、也可以输入如下命令，运行项目

npm run start

文档结构图：
在这里插入图片描述
程序的入口文件时文件目录下src文件夹下的main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
//引入组件
import App from './App'

Vue.config.productionTip = false

/* eslint-disable no-new */
//实例化Vue对象
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})
  1. 以.vue结尾的vue单文件里面，必须有一个根元素包裹所有的元素
  2. 在vue-cli开发的项目中data不再是对象的形式而是函数的形式
<script>
    new Vue({
      el:'#root',
      data:{//data在Vue实例中，以对象的形式展现

      }
    })
</script>
<style>

</style>

<template>
  <div>
      <div>
        <input/>
        <button>提交</button>
      </div>
      <ul>
        <li></li>
      </ul>
  </div>

</template>

<script>
    export default{
      //在vue脚手架创建的vue项目中，data以函数的形式展现
      data:function(){
			return {
			}
      }
    }
    //可以简写为以下方式(在ES6语法中，简写成如下方式)
    data(){
    	return {
		}
    }
</script>
<style>

</style>

改写todolis

TodoItem.vue

<template>
  <div>
    <li @click="handleDelete">
      {{content}}
    </li>
  </div>
</template>

<script>
export default {
 props:['content','index'],//定义接受父组件的属性content,index
 methods:{
   handleDelete(){
     //子组件触发delete事件，父组件需要监听这个事件
    this.$emit('delete',this.index);
   }
 }
}
</script>

<style>

</style>

TodoList.vue

<template>
  <div>
      <div>
        <input v-model="inputValue"/>
        <button @click="handleSubmit">提交</button>
      </div>
      <ul>
        <!-- 3.引用局部组件-->
        <!-- 父组件监听到子组件的delete事件之后，执行handleDelete-->
        <todo-item v-for="(item,index) in list" :content="item" :index="index" :key="index" @delete="handleDelete"></todo-item>
      </ul>
  </div>

</template>

<script>
  //1.引入组件
  import TodoItem from './components/TodoItem.vue'
    export default{
      //在vue脚手架创建的vue项目中，data以函数的形式展现
      data:function(){
          return{
            inputValue:'',
            list:[]//定义数组
          }
      },
      components:{
        //2.注册组件
        //将局部组件注册到页面中
        /* todo-item标签对于TodoItem标签*/
        'todo-item':TodoItem
      },
      methods:{
        handleSubmit(){
          this.list.push(this.inputValue);//将输入的inputValue的值添加到数组中
          this.inputValue='';//清空inputValue的值
        },
        handleDelete(index){
          this.list.splice(index,1);//删除当前项
        }
      }
    }
</script>
<style>

</style>

文件结构：
在这里插入图片描述

全局样式与局部样式

scoped：css作用域作用于当前页面或组件，用来区分在子组件和父组件.class名称一样时进行区分，防止全局污染

<style scoped>

</style>

class与style绑定

class的绑定

  1. 绑定单个class
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js">
		</script>
	</head>
	<body>
		<div id="app">
		<!--2.：class绑定样式，:class="{样式名称：变量名}"
		变量名的值为true为绑定，false为不绑定样式
		-->
			<div :class="{red:isRed}">hi vue</div>
		</div>
		<script type="text/javascript">
			var vm=new Vue({
				el:'#app',
				data:{
				//3.变量名
					isRed:true
				}
			});
		</script>
		<style type="text/css">
		/*1.声明样式*/
			.red{
				width: 200px;
				height: 200px;
				background-color: #FF0000;
				line-height: 200px;
				text-align: center;
				color: #FFF;
			}
		</style>
	</body>
</html>

页面效果：
在这里插入图片描述

  1. 绑定多个class样式，class之间用逗号,隔开
    代码如下：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js">
		</script>
	</head>
	<body>
		<div id="app">
			<div :class="{red:isRed,green:isRed}">hi vue</div>
		</div>
		<script type="text/javascript">
			var vm=new Vue({
				el:'#app',
				data:{
					isRed:true
				}
			});
		</script>
		<style type="text/css">
			.red{
				width: 200px;
				height: 200px;
				background-color: #FF0000;
				line-height: 200px;
				text-align: center;
				color: #FFF;
			}
			.green{
				font-size: 32px;
			}
		</style>
	</body>
</html>

页面样式
在这里插入图片描述
3.绑定数组形式的class

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 1.引入vue.js -->
		<script src="vue.js"></script>
	</head>
	<body>
		<!-- 3.绑定class属性 -->
		<div id="app" :class="['green']">hello</div>
		<style type="text/css">
			.green{
				color: #00FF00;
				font-size: 30px;
			}
		</style>
		<script type="text/javascript">
			/* 2.创建vue的实例 */
			new Vue({
				el:'#app'
			});
		</script>
	</body>
</html>

页面样式：
在这里插入图片描述
4.通过条件运算绑定class样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 1.引入vue.js -->
		<script src="vue.js"></script>
	</head>
	<body>
		<!-- :class条件运算绑定class -->
		<div id="app" :class="isActive?'red':''">1</div>
		<script>
			/* 2.创建Vue实例*/
			new Vue({
				el:'#app',
				data:{
					isActive:true
				}
			});
		</script>
		<style type="text/css">
			.red{
				color: #FF0000;
			}
		</style>
	</body>
</html>

style绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js"></script>
	</head>
	<body>
	<!--:style绑定样式,:style="{样式名称：'属性值',样式名称：'属性值'}"-->
		<div :style="{color:'hotpink',fontSize:'32px'}" id="app">hello</div>
		<script>
		/*1.实例化Vue对象*/
			new Vue({
				el:'#app'
			});
		</script>
	</body>
</html>

页面样式
在这里插入图片描述

事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 1.引入vue.js -->
		<script src="vue.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- @dblclick：双击事件
			 @click:单机事件
			 访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法
			 -->
			<button @click="greet('abc',$event)" >greet</button>
			<button @dblclick="add(1)">双击事件</button>
		</div>
		<script type="text/javascript">
			new Vue({
				el:'#app',
				data:{
				},
				methods:{
					greet:function(str,e){
						alert(str);
						confirm(e);
					},
					add:function(str){
						confirm(str);
					}
				}
			})
		</script>
	</body>
</html>
迷失的小鹿
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue常用的指令
田兴的博客
12-17 4048
一、.指令： 1 . v-model 多用于表单元素实现双向数据绑定 2 .v-for 格式： v-for=“字段名 in(of) 数组json” 循环数组或json,需要注意从vue2开始取消了$index 3 .v-show 显示内容 （同angular中的ng-show） 4 .v-hide 隐藏内容（同angular中的ng-hide） 5 .v-if 显示与隐藏 （dom元素...
测开：vue基本语法
喵酱
03-02 520
测开：vue基本语法
【Vue 基础知识】控制元素显示隐藏的方法和区别
热门推荐
业余丰富各种技术栈
09-03 2万+
vue控制元素显示隐藏的方法和区别;有v-if的地方不一定有v-else，有v-else同级元素中必有v-if;v-if有更高的`切换消耗`;v-show有更高的`初始渲染消耗`;如果需要`频繁切换则用v-show`，反之则用v-if.
vue router路由中hidden属性的作用
最新发布
qq_45754184的博客
11-03 1571
hidden属性在项目中是作为一个判断该路由页面要不要在项目的菜单栏显示的标识，这里说的菜单栏就是我们常见的顶部菜单或者侧边栏菜单等。
VUE项目路由文件中hidden属性有什么作用
ButterPig
01-06 4130
vue router路由中hidden属性的作用
vue基础学习代码342234
03-19
在这个"vue基础学习代码342234"的压缩包中，我们可以预期找到一系列与Vue.js基础概念和实践相关的代码示例。 首先，Vue.js的核心概念之一是**虚拟DOM（Virtual DOM）**。它是一种优化机制，使得UI更新更加高效，...
vue基础学习总结经验
04-26
vue基础学习总结经验，让你可以更轻松的了解并快速的掌握vue入门
vue基础学习.rar
07-21
2. 学习了Vue中最基本代码的结构 3. 插值表达式 v-cloak v-text v-html v-bind（缩写是:） v-on（缩写是@） v-model v-for v-if v-show 4. 事件修饰符 ： .stop .prevent .capture .self .once 5. el 指定要控制的...
vue基础 学习 js 金额计算器 单向绑定
04-02
vue基础 学习 js 金额计算器 单向绑定
Vue基础学习之项目整合及优化
12-12
使用 webpack 构建过 Vue 项目的同学应该知道 alias 的作用，我们可以使用它将复杂的文件路径定义成一个变量来访问。在不使用 alias 的项目中，我们引入文件的时候通常会去计算被引入文件对于引入它的文件的相对路径...
Vue if判断显示隐藏
从盲流子到程序员
01-12 1万+
//当我选择个人的时候显示ROW &lt;Select v-model="model11" multiple filterable @on-change="choosePer()"&gt; &lt;Option v-for="item in cityList" :value="item.val...
vue选项卡，实现上一步，下一步，双向随时切换 ，及单向穿梭框
weixin_43764828的博客
12-01 3650
<template> <div id="box"> <div id="leftBox"> <div id="leftContainer"> <span @click="shouHideClick" style="display: inline-block;float: right;cursor: pointer;"> <img style="width:24px; ba...
vue中的 v-if与jquery中的hide()有什么区别 vue如何在控制台修改数据
丿灬安之若死
02-23 2723
先调试hide() 可以在网站http://jquery.com/下打开控制台$('a').hide(); 然后审查元素可以找到a标签仅仅是css加了一行如下属性相当于vue中的v-show display: none; 而 vue v-if如果不满足的时候 审查元素是找不到这个元素的 vue如何在控制台修改数据   写完一段vue代码  写在js中 var app=n...
jquery隐藏div_jQuery动画效果
weixin_39658726的博客
11-28 237
-------------------------------------------------------------------------------------------------------1. 隐藏和显示show()方法和hide()方法是jQuery中最基本的动画方法。在HTML文档里，为一个元素调用hide()方法，会将该元素的display样式改为“none”。1.1 hi...
hide show vue 动画_【分享】监听subNVue的show和hide事件的方法
weixin_39608118的博客
02-23 534
使用uniapp做开发，时不时会遇到困难。遇到困难时，可以在Dcloud社区和QQ群提问。但Dcloud官方分配于解答开发者疑问的力量远远不足，大多数提问根本不会得到任何回复。我是个暴脾气，很多时候气得捶足顿胸。但那又怎样呢，不回复就是不回复。以前，我对这个问题只会抱怨。后来，我想通了：自己对社区并没有太多贡献，凭什么社区无偿为你解答问题？如果每个人都愿意花一点时间，主动在社区发布一些经验分享，或...
Vue 条件渲染
ivenqin的博客
12-02 286
v-if 指令的使用 在Vue中，v-if 指令可以用于条件性地渲染一块内容，这块内容只会在指令的表达式返回 truthy 值的时候被渲染。 示例： 我们来看下面这段代码，有姓名和年龄这两条信息，现要求只显示姓名，而隐藏年龄： <body> <div id="app"> <p v-if="show">显示姓名：小飞侠</p> <p v-if="hide">隐藏年龄：28</p> </
Vue隐藏显示、只读
Matea's Record
07-18 1万+
1.Vue隐藏显示 &lt;div style="padding-top:5px;" v-bind:class="{hidden: isHidden }"&gt; &lt;label class="inline"&gt; &lt;input id="id-button-borders" checked="" v-model="use
vue 多个列表显示隐藏
Practice makes perfect
09-05 7345
1.给循环的数组添加一个hide属性 2.取反this.All[index].hide=!this.All[index].hide;使得值变为true,  
vue中点击显示隐藏
fgg9655的博客
10-08 7987
div v-if="seller.supports" class
学习vue需要什么基础
03-08
学习 Vue 需要掌握 HTML、CSS 和 JavaScript 的基础知识，特别是对于 JavaScript 的面向对象编程和异步编程有一定的了解。同时，熟悉前端框架的概念和基本使用方法也是必要的。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值