![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue笔记
泡菜鱼丷
we are one
展开
-
vue随笔3(v-for,v-on,v-model)
v-for:根据数据生成结构 v-for指令的作用是根据数据生成结构 数组经常和v-for结合使用 语法是 {item,index} in 数据 item和index可以结合其他指令一起使用 数组长度的更新会同步到页面上,是响应式的 <body> <div id="app"> <ul> <!--普通数组--> <li v-for="(fruit,index) in a.原创 2022-03-23 19:41:14 · 1339 阅读 · 0 评论 -
Vue学习随笔2(v-show,v-if,v-bind)
v-show:根据表达值的真假,切换元素的显示和隐藏 <body> <div id="app"> <img v-show="isShow" src="./小黑.jfif"> <img v-show="age>=20" src="./小黑.jfif"> <input type="button" value="显示状态" @click="changisShow"> <input type="button原创 2022-03-22 21:30:39 · 306 阅读 · 0 评论 -
Vue实例1:计数器(v-on,v-text)
步骤: data中定义数据:比如num methods中添加两个方法add(递增)sub(递减) 使用v-text将num设置给span标签 使用v-on将add和sub分别绑定给+ -按钮 逻辑:累加时小于10累加,否则提示;递减时大于0递减,否则提示。 <body> <!--计数器功能区域--> <div id="app"> <button @click="sub"> -原创 2022-03-21 21:09:52 · 1053 阅读 · 0 评论 -
Vue学习随笔1(v-text,v-html,v-on)
v-text:设置标签的内容; 默认写法会替换全部内容,使用差值表达式{{}}可以替换指定内容; 内部支持写表达式 v-html:设置元素的innerHTML 内容中有HTML结构会被解析为标签 v-text指令无论什么内容之后解析为文本 解析文本使用v-text,解析html结构使用v-html <div id="app"> <p v-html="contant"></p> <p v-text="contant">.原创 2022-03-21 16:48:32 · 769 阅读 · 0 评论