银川商城网站建设,荣成网站制作公司,网站模板下载器,云南网站做的好的公司简介6、Vue指令 指令#xff1a;带有v-前缀的特殊标签属性 #xff08;1#xff09;v-html 作用#xff1a;设置元素的innerHTML 语法#xff1a;v-html“表达式” 示例#xff1a; 提供一个地址#xff0c;这里是百度的地址#xff0c;通过v-html渲染 结果#xff…6、Vue指令 指令带有v-前缀的特殊标签属性 1v-html 作用设置元素的innerHTML 语法v-html“表达式” 示例 提供一个地址这里是百度的地址通过v-html渲染 结果 2v-show与v-if 1v-show ①作用控制元素显示与隐藏 ②语法v-show“表达式”表达式值true显示false隐藏 ③原理切换displaynone控制显示器 ④场景频繁切换显示隐藏的场景 2v-if ①作用控制元素的显示与隐藏条件渲染 ②语法v-if“表达式”表达式值true显示false隐藏 ③原理基于条件判断是否创建或移除元素节点 ④场景要么显示要么隐藏不频繁切换的场景 3区别 当表达式值为true时无显著区别当值为false时v-show通过控制css的displaynone来控制显示与隐藏 4示例 提供一个布尔值和两个盒子 值为true时 值为false时 3v-else与v-else-if ①作用辅助v-if进行渲染判断 ②语法v-else 、 v-else-if“表达式” ③注意需要紧挨着v-if一起使用 1示例 ①v-else 代码 结果 ②v-else-if 代码 结果 4v-on 1作用注册事件添加监听提供处理逻辑 2语法 ①v-on:事件名“内联语句” ②v-on事件名“menthod中的函数名” 3简写事件名 4示例 内联 代码 结果 函数 代码 结果 点击“切换显示与隐藏” 5 利用v-on传参参数名 代码 结果 5v-bind 1作用动态设置html的标签属性-src 、url等 2语法v-bind属性名“表达式” 3简写“属性名表达式” 4示例 代码 效果 6v-for 1作用基于数据循环多次渲染整个元素-数组、对象、数字… 2语法v-for”(item,index) in 数组”item-数组中的每一项index-数组的下标 3v-for中的key ①语法 key属性“唯一标识” ②作用给列表项添加唯一标识便于Vue进行列表项的正确排序复用。 ③注意 如果不加keyv-for的默认行为会尝试原地修改元素就地复用 Key的值只能是字符串或数字类型Key的值必须具有唯一性推荐使用id作为key不推荐使用index作为keyindex会变化 代码 结果 7v-model 1作用给表单元素使用双向数据绑定-快速获取或设置表单元素内容 数据变化-视图更新视图变化-数据更新 2语法:v-model”变量” 3示例 代码 结果 点登录 点重置