机械网站建设价格,青海建设兵团网站小院,微商城有哪些平台,商洛市住房城乡建设厅网站目录
V-html
v-show和v-if
v-show
显示
隐藏
v-if
显示
隐藏
总结
显示隐藏的应用场景
未登录的情况
登录的情况
v- else 和 v-else-if
v-if 和v-else
v-if 和 v-else-if 总结#xff1a;
v-on
语法一#xff1a;
语法二#xff1a; 调用传参
v-bind…目录
V-html
v-show和v-if
v-show
显示
隐藏
v-if
显示
隐藏
总结
显示隐藏的应用场景
未登录的情况
登录的情况
v- else 和 v-else-if
v-if 和v-else
v-if 和 v-else-if 总结
v-on
语法一
语法二 调用传参
v-bind
v-for
v-model 指令 带有 v- 前缀的特殊标签属性
V-html
未使用V-html
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body!--准备容器 --
div idapp
div{{msg}}/div/div!-- 引包 --
script srchttps://cdn.jsdelivr.net/npm/vue2.7.14/dist/vue.js/script!-- 创建实例 --
scriptVue.config.productionTip false;var appnew Vue({el:#app,data:{msg:a hrefhttp://www.baidu.com百度/a}});
/script
/body
/html 输出来的是一串字符串
如果使用v-html 标签效果如下 v-show和v-if
作用控制元素显示隐藏
v-show
显示 查看控制台 隐藏 隐藏起来了
查看控制台 通过控制台的数据可以得知v- show是通过切换css 来控制显示隐藏
v-if
再来看看v-if 是一个什么样的情况
显示 隐藏 通过控制台的数据可以得知v- if是通过根据条件的判断来创建或者移除元素节点来 控制显示隐藏
总结
两者的作用都是控制元素显示隐藏但是两者使用的原理不同v-show使用切换css来
控制显示隐藏v-if 基于条件的判断来创建或者移除元素节点
显示隐藏的应用场景
通过一个例子来体会一下显示隐藏到底是用来干嘛的
京东官网的首页
未登录的情况 如果没有登录或者注册的情况就会出现 “ 你好请登录 免费注册“
登录的情况 登录进去的时候再来看首页就没有 “ 你好请登录 免费注册“
根据条件来判断是否登录如果没有登录就创建这样元素节点 “ 你好请登录 免费注册“ 如果登录就移除节点。
如上就是举了一个例子具体使用了什么方式不清楚但原理差不多
v- else 和 v-else-if
作用 辅助v-if 进行判断渲染
v-if 和v-else v-if 和 v-else-if 总结
v-else和 v-else-if不能单独使用需要辅助v-if才能使用 v-on 作用 用来监听dom事件并执行处理逻辑
语法一 v-on: 事件名” 内联语句“ 点击就会执行num的方法
点击-就会执行num--的方法 语法二 v-on :事件名 ” 函数方法名“ 注意 method后面要加s 函数名后面要带 点击按钮出现弹出框 可以代替v-on: 调用传参
div idappdiv classboxh1水卡充值/h1button clickrecharge(5)充值5元/buttonbutton clickrecharge(10)充值10元/buttonbutton clickrecharge(20)充值20元/button/div
p银行卡余额:{{money}}/p
/div
script srchttps://cdn.jsdelivr.net/npm/vue2.7.14/dist/vue.js/script!-- 创建实例 --
script
/* Vue.config.productionTip false;*/var appnew Vue({el:#app,data:{money:300},methods:{recharge: function (a){this.money-a}}});
/script 点击充值5元 v-bind
作用用于将 Vue 实例的数据绑定到 HTML 元素的属性上。比如 src url title
语法 v-bind :属性名” 表达式“
!--准备容器 --
div idapp
img v-bind:srcimageUrl alt
/div
script srchttps://cdn.jsdelivr.net/npm/vue2.7.14/dist/vue.js/script!-- 创建实例 --
script
/* Vue.config.productionTip false;*/var appnew Vue({el:#app,data:{imageUrl: ./images/th.jpg},});
/script v-bind也可以省略不写
div idapp
img :srcimageUrl alt
/div
v-for
作用 基于数据循环多次渲染整个元素
语法 v-for (item , index) in 数组
div idapph2四大名著/h2li v-for(item,index) in list{{item}}/li
/div
script
/* Vue.config.productionTip false;*/var appnew Vue({el:#app,data:{list:[三国演义 ,水浒传,西游记,红楼梦]}});
/script v-model
作用 作用于表单元素可以让数据和视图形成双向绑定绑定之后可以快速获取
或设置表单元素的内容
语法 v-model变量”
div idapp账户: input typetext v-modelnamebrbr密码: input typepassword brbrbutton登录/buttonbutton重置/button
/divscript
/* Vue.config.productionTip false;*/var appnew Vue({el:#app,data: {name: ,password: }reset(){this.namethis.password}});
/script
打开控制台使用浏览器安装的vue插件
浏览器安装vue插件
https://blog.csdn.net/m0_67930426/article/details/134598104?spm1001.2014.3001.5502 输入数据后点击 保存
