首页 > 其他分享 >Vue模板语法、属性绑定、条件渲染的学习

Vue模板语法、属性绑定、条件渲染的学习

时间:2024-05-13 23:53:24浏览次数:16  
标签:Vue show bind 绑定 else 模板 属性

Vue模板语法:
使用插值表达式的内容必须是有结果的内容才可以,就是需要return出来的才可以显示出来。
插值表达式所表现的内容为纯文本模式
如何避免
即所有的逻辑操作都在js里面实现,不要再templete中实现可以完美的避免这个问题。

Vue属性绑定
1.使用v-bind 进行属性绑定 语法:v-bind:class/id =“名称”
2.对于v-bind是将属性进行绑定,如果属性的结果是null或者undefined则会自动将其删除不进行显示
3.v-bind有一种简写模式 直接使用:即可代替 v-bind
4.也可以使用布尔类型的 true false
5.动态绑定多个值:在数组中新建一个对象,v-bind绑定一个对象的明成即可完成

Vue中的条件渲染
1.有四个指令 v-if v-else v-else-if v-show
v-if:条件性的渲染一块内容 只在结果为真的时候才显示
v-else:是不需要绑定其他内容的了
v-else-if:是用来判断多个条件的 v-else-if可以多次使用
v-show:是按照条件进行显示的

## v-if和v-show的区别

v-if适用于少次切换的
v-show 适用于频繁切换的 改变的是class的属性display

标签:Vue,show,bind,绑定,else,模板,属性
From: https://www.cnblogs.com/JinshanJiao/p/18190315

相关文章

  • 今天学了vue3的composition API
    代码量:60左右时间:1h搏客量:1<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><linkrel="icon"href="/favicon.ico"><metaname="viewport"content="wi......
  • 【vue3入门】-【22】 组件生命周期
    组件生命周期每个Vue组件实例在创建是都需要经历一系列的初始化步骤,比如设置好数据侦听,编译模版,挂载实例到DOM,以及在数据改变时更新DOM。在此过程中,它也会运行被称为生命周期钩子的函数,让开发者有机会在特定阶段运行自己的代码。生命周期函数都是会自己执行app.vue<template>......
  • 一些模板
    之前的模板在我考研时脑子一热删掉了QAQ,现在重新写了点,Python和C++都有。dijkstra\(O(n^2)\)importosimportsysimportmathimportcopyfromcollectionsimportdequefromheapqimport*sys.setrecursionlimit(30000)MAXN=1<<32n,m,st=map(int,input().......
  • Vue3学习(二十四)- 文档页面功能开发
    写在前面这部分真的感觉超级难,其实也不能说难,主要是真的想不到这个思路应该这么做,或者说他好厉害,他怎么知道该这么设计实现。说下难点吧,我觉得后天逻辑还好,主要是前端部分真的需要点花点时间来思考,比如布局、交互设计的实现等等。文档页面功能开发1、任务拆解增加文档页面,......
  • checkboxlist绑定数据方法
    checkboxlist绑定数据方法1.把数据绑定到CheckBoxList中特别要注意加载顺序protectedvoidPage_Load(objectsender,EventArgse){if(!Page.IsPostBack){SqlConnectioncon=GetDBCon.GetCon();......
  • vue2使用elementUI组件el-tooltip指定元素进行提示信息(图标显示信息)
     <el-table-columnprop="operation"label="操作"borderwidth="200px"><templateslot-scope="scope"><divclass="operation-icons"><!......
  • .vue在调用method为delete时,出现了无法传参的情况
    1.vue在调用method为delete时,出现了无法传参的情况:调用deleteapi发现想传入的json格式的参数并没有传入成功,如下:  这其实是vue的delete方法和其他postputget方法不一样导致的,需要修改delete传参格式就行了: Vue中axiosdelete请求参数踩坑:vue中axios的delete和post......
  • vue要做权限管理该怎么做?如果控制到按钮级别的权限怎么做?
    一、是什么权限是对特定资源的访问许可,所谓权限控制,也就是确保用户只能访问到被分配的资源而前端权限归根结底是请求的发起权,请求的发起可能有下面两种形式触发页面加载触发页面上的按钮点击触发总的来说,所有的请求发起都触发自前端路由或视图所以我们可以从这两方面入手......
  • 低开开发笔记(六): 工作台与模板样式开发
    好家伙,仅仅只是实现了样式,完整功能暂未完成 完整代码已开源https://github.com/Fattiger4399/ph-questionnaire.git  1.灵感来源(抄袭对象)刚开始想着随便写个低开项目练练手的,然后就写成这样了1.1.简道云 1.2.问卷星  2.上代码<template><divc......
  • Vue3得通信方式
    1父向子props(defibeProps),子向父自定义事件(defineEmits)2时间总线(mitt插件)3v-model(可以绑定多个v-model)a给子组件传递props[modelValue]b给子组件传递自定义事件@update:modelValue列子:<Childv-model:name="name"v-model:sex="sex>4useAttrs(引入useAttr......