首页 > 其他分享 >vue基础用法-内容渲染指令

vue基础用法-内容渲染指令

时间:2023-06-01 23:55:40浏览次数:47  
标签:vue 渲染 text 用法 语法 指令 内容

1.指令的概念

指令(Directives)是vue为开发者提供的模板语法,用于辅助开发者渲染页面的基本结构
vue中的指令按照不同的用途可以分为如下6大类:

  1. 内容渲染指令
  2. 属性绑定指令
  3. 事件绑定指令
  4. 双向绑定指令
  5. 条件渲染指令
  6. 列表渲染指令

注意:指令是vue开发中最基础、最常用、最简单的知识点。

1.1内容渲染指令

内容渲染指令用来辅助开发者渲染DOM元素的文本内容。常用的内容渲染指令有如下3个:

  • v-text
  • {{}}
  • v-html

v-text

缺点:会覆盖元素内部原有的内容!
用法示例:

<div id="app">
	<p v-text="username"></p>
	<p v-text="gender">性别</p>
</div>

{{}}语法

vue提供的{{}}语法,专门用来解决v-text会覆盖默认文本内容的问题。这种{{}}语法的专业名称是插值表达式(英文名为:Mustache
在实际开发中用的最多,只是内容的占位符,不会覆盖原有的内容

<p>性别:{{gender}}</p>

v-html

可以把带有标签的字符串,渲染成真正的HTML内容
image

标签:vue,渲染,text,用法,语法,指令,内容
From: https://www.cnblogs.com/yang-young-young/p/17450565.html

相关文章

  • 基于JAVA的springboot+vue财务管理系统,附源码+数据库+论文+PPT
    1、项目介绍随着信息技术和网络技术的飞速发展,人类已进入全新信息化时代,传统管理技术已无法高效,便捷地管理信息。为了迎合时代需求,优化管理效率,各种各样的管理系统应运而生,各行各业相继进入信息管理时代,财务管理系统就是信息时代变革中的产物之一。任何系统都要遵循系统设计的基......
  • vue系列---【vue 使用decimal.js 解决小数相加合计精确度丢失问题】
    使用npm安装decimal.js库npminstalldecimal.js2.在Vue组件中引入该库importDecimalfrom'decimal.js';3.使用示例footerMethod({columns,data}){letsumArr=[];columns.map((column,columnIndex)=>{if(columnIndex===0){su......
  • 在Vue中实现扫码枪读取条形码数据
    1.创建扫码枪输入组件首先,我们需要创建一个Vue组件来处理扫码枪的输入。在组件中,我们使用一个input元素来接收扫码枪的输入,并将输入的值绑定到组件的scanEntry属性上。<template><divclass="BarCodeScannerDiv"><inputclass="input"v-model="scanEntry":placehold......
  • vue2响应式原理
    一、初识响应式原理如果我们在Vue实例中声明过的数据发生了改变,那么所有用到这份数据的视图都会更新重新渲染,我们称这些数据就是响应式数据。响应式概括来说就是数据驱动视图的自动更新。<divid="app">{{obj.message}}</div>letdata={obj:{message:'Hel......
  • ant design vue 下的a-input 使用v-decorator(修改数据)回显
    a-input使用v-decorator回显不应该用v-model,可以使用this.form.setFieldsValue来动态改变表单值。定义form:<template><divclass="main"><a-formid="formLogin"class="user-layout-login"ref="formLogin"......
  • 初识Vue
    前端的发展史#1HTML(5)、CSS(3)、JavaScript(ES5、ES6):编写一个个的页面->给后端(PHP、Python、Go、Java)->后端嵌入模板语法->后端渲染完数据->返回数据给前端->在浏览器中查看 -javascript=ECMAScript(5,6,13)+Dom+Bom#2Ajax的出现->后台发送异步请求,Re......
  • antd的upload组件的各种上传、下载操作(vue)
    作为前端小白刚刚接触上传、下载文件的操作也让我很头疼,所以利用时间记录一下方便巩固,希望能够帮到大家。我将情况分为以下几种:一、点击按钮上传单个文件//html<a-upload:action="baseUrl+'/api/uploadSingleFile'":headers="headers"......
  • SpringBoot SSM vue 在线办公系统
    SpringBootSSMvue在线办公系统系统功能登录忘记密码首页统计分析用户管理员工管理公告管理考勤管理绩效管理薪酬管理流程管理留言管理文件管理开发环境和技术开发语言:Java使用框架:SpringBoot或SSM +Mybatis+MysqlSpringBoot是一个用于构建Java应用......
  • uniapp 组件中使用页面的生命周期(vue2)
    用于直接在组件中使用onLoad,onBackPress等因为之前在写App的时候有许多弹窗,希望可以在有弹窗的时候先关闭弹窗,没有弹窗在执行返回事件,因此需要在页面onBackPress里面写很多判断,因此找了一些方法,写了可以直接在组件中调用页面生命周期的方法!使用mixinthis.$children去循环查询......
  • 通过实例了解vue3.3更新的特征
    开场白5月份,vue团队发布了vue3.3.这次小版本的发布主要解决了--Vue与TypeScript一起使用时的许多长期存在的痛点.下面我们一起来学习一下vue3.3新特征准备新新特征的环境根据官方团队的描述,我们需要准备一下工作。vue升级到3.3时,建议同时更新以下依赖项:Volar/vue......