当前位置: 首页 > news >正文

Vue3学习笔记-模板语法和属性绑定-2

一、文本插值

使用{ {val}}放入变量,在JS代码中可以设置变量的值

<template><p>{{msg}}</p>
</template>
<script>
export default  {data(){return {msg: '文本插值'}}
}
</script>

文本值可以是字符串,可以是布尔值或数字,也可以是bool ? 'str1': 'str2' 

<template><p>{{msg}}</p><p>{{num+3}}</p><p>{{isOk}}</p><p>{{isOk ? 'yes': 'no'}}</p>
</template>
<script>
export default  {data(){return {msg: '文本插值',isOk: true,num: 5}}
}
</script>

二、属性绑定

属性不可以直接使用{ {}}进行绑定,需要使用v-bind。

<template><button v-bind:id="id_name" v-bind:class="class_name">{{button_text}}</button>
</template>
<script>
export default  {data(){return{button_text:'开始',class_name:'hello',id_name: 'hello',}}
}
</script>

 简写:直接在class前面加:就可以

http://www.lryc.cn/news/530913.html

相关文章:

  • csapp笔记3.6节——控制(1)
  • PYH与MAC的桥梁MII/MIIM
  • 国内flutter环境部署(记录篇)
  • 选择排序_75. 颜色分类
  • C++ Primer 标准库vector
  • C# 数组和列表的基本知识及 LINQ 查询
  • 大厂面试题备份20250201
  • w191教师工作量管理系统的设计与实现
  • Git 版本控制:基础介绍与常用操作
  • 讲清逻辑回归算法,剖析其作为广义线性模型的原因
  • 数据结构(1)——算法时间复杂度与空间复杂度
  • K8s运维管理平台 - xkube体验:功能较多
  • spring源码阅读系列文章目录
  • 快速提升网站收录:利用网站新闻发布功能
  • 【14】WLC3504 HA配置实例
  • 什么是LPU?会打破全球算力市场格局吗?
  • 智慧物业管理系统实现社区管理智能化提升居民生活体验与满意度
  • Vue3 表单:全面解析与最佳实践
  • MySQl的日期时间加
  • 实战:如何利用网站日志诊断并解决收录问题?
  • 每日一题——有效括号序列
  • PyTorch数据建模
  • OpenAI 实战进阶教程 - 第二节:生成与解析结构化数据:从文本到表格
  • 二叉树--链式存储
  • Windows 中的 WSL:开启你的 Linux 之旅
  • 2.3学习总结
  • 前端力扣刷题 | 6:hot100之 矩阵
  • docker gitlab arm64 版本安装部署
  • 路径规划之启发式算法之二十九:鸽群算法(Pigeon-inspired Optimization, PIO)
  • 【AudioClassificationModelZoo-Pytorch】基于Pytorch的声音事件检测分类系统