CSDN话题挑战赛第1期
活动详情地址:https://marketing.csdn.net/p/bb5081d88a77db8d6ef45bb7b6ef3d7f
参赛话题:前端学习记录
话题描述:记录前端学习过程中的某个知识点、解决方案等等
模板语法
Vue中的模板文件都是由模板、业务逻辑
绑定
文本数据绑定
首先清空App.vue,获得一个纯净的环境。
在App.vue文件中的模板上可以绑定业务逻辑中的数据
绑定的数据可以是对象
可以给模板内容添加样式
html数据绑定,指将值包含html内容的属性绑定到模板,使用{
{}}不能实现,用v-html属性
v-bind绑定属性,指将属性值绑定到标签的属性值上。
v-bind绑定动态属性,指要绑定的参数和参数值都是动态获取的。语法v-bind:[attributeName]
执行逻辑
Vue3的template模板中可以使用js表达式
{
{num+2}} {
{num*3}} # 运算符
{
{ok ? ‘YES’ : ‘NO’}} # 条件运算符
{
{message.split(‘‘).reverse().join(‘’)}} # 方法调用
v-else可以给v-if添加一个else块
例:随机生成一个数字,判断是否大于0.5
v-else-if是v-if的else-if块,可以链式使用多次注:v-else、v-else-if必须跟在v-if或v-else-if之后。否则将不被识别
v-if可以切换多个元素,可以包裹在元素中并使用v-if。(template不可见)
可以使用v-show来根据条件展示元素,类似v-if
区别:v-if操作DOM,v-show通过css控制显示隐藏,如果要频繁切换推荐用v-show
循环结构
v-for用于循环,语法:site in sites。还支持第二参数,是当前项的索引:(site, index) in sites
v-for可以绑定数组来渲染一个项目列表。注:如果语法错误,则须指定:key
另:模板中也可以使用v-for
另:数组中元素也可以是对象
数组的元素如果还包含数组时,需要循环嵌套遍历
v-for循环对象,语法:(value,[key, index]) in object。3个变量分别保存属性值、属性名、索引。
v-for也可