【Vue】vue指令

目录

V-html

v-show和v-if

v-show

显示

隐藏

v-if

显示

隐藏

总结

显示隐藏的应用场景

未登录的情况

登录的情况

[v- else 和 v-else-if](#v- else 和 v-else-if)

[v-if 和v-else](#v-if 和v-else)

[v-if 和 v-else-if](#v-if 和 v-else-if)

总结:

v-on

语法一:

语法二:

@

调用传参

v-bind

v-for

v-model


指令: 带有 v- 前缀的特殊标签属性

V-html

未使用V-html

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--准备容器  -->
<div id="app">
<div>{{msg}}</div>

</div>

<!-- 引包 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

<!-- 创建实例 -->
<script>
    Vue.config.productionTip =false;

    var  app=new Vue({
        el:'#app',
        data:{
          msg:'<a href="http://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:

调用传参

html 复制代码
<div id="app">
 <div class="box">
     <h1>水卡充值</h1>
     <button @click="recharge(5)">充值5元</button>
     <button @click="recharge(10)">充值10元</button>
     <button @click="recharge(20)">充值20元</button>
 </div>
<p>银行卡余额:{{money}}</p>
</div>
html 复制代码
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

<!-- 创建实例 -->
<script>
/*    Vue.config.productionTip =false;*/

    var  app=new Vue({
        el:'#app',
        data:{
        money:300

      },
        methods:{
           recharge: function (a){
              this.money-=a
            }

        }

    });
</script>

点击充值5元

v-bind

作用:用于将 Vue 实例的数据绑定到 HTML 元素的属性上。比如 src url title

语法: v-bind :属性名=" 表达式"

html 复制代码
<!--准备容器  -->
<div id="app">
<img v-bind:src="imageUrl"  alt="">
</div>
html 复制代码
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

<!-- 创建实例 -->
<script>
/*    Vue.config.productionTip =false;*/

    var  app=new Vue({
        el:'#app',
        data:{
       imageUrl: './images/th.jpg'

      },


    });
</script>

v-bind也可以省略不写

html 复制代码
<div id="app">
<img :src="imageUrl"  alt="">
</div>

v-for

作用: 基于数据循环,多次渲染整个元素

语法 : v-for ="(item , index) in 数组

html 复制代码
<div id="app">
    <h2>四大名著</h2>
    <li v-for="(item,index) in list">{{item}}</li>
</div>
html 复制代码
<script>
/*    Vue.config.productionTip =false;*/

    var  app=new Vue({
        el:'#app',
        data:{
            list:['三国演义' ,'水浒传','西游记','红楼梦']
      }


    });
</script>

v-model

作用: 作用于表单元素,可以让数据和视图,形成双向绑定(绑定之后,可以快速获取

或设置表单元素的内容)

语法:v-model="变量"

html 复制代码
<div id="app">
    账户: <input type="text" v-model="name"><br><br>
    密码: <input type="password" ><br><br>
    <button>登录</button>
    <button>重置</button>
</div>
html 复制代码
<script>
/*    Vue.config.productionTip =false;*/

    var  app=new Vue({
        el:'#app',
        data: {
            name: '',
            password: ''

        }
      reset(){
                this.name=''
                this.password=''
            }

    });
</script>

打开控制台使用浏览器安装的vue插件

浏览器安装vue插件

https://blog.csdn.net/m0_67930426/article/details/134598104?spm=1001.2014.3001.5502

输入数据后点击

保存

相关推荐
程序媛-徐师姐8 分钟前
Java 基于SpringBoot+vue框架的老年医疗保健网站
java·vue.js·spring boot·老年医疗保健·老年 医疗保健
yngsqq9 分钟前
c#使用高版本8.0步骤
java·前端·c#
Myli_ing44 分钟前
考研倒计时-配色+1
前端·javascript·考研
余道各努力,千里自同风1 小时前
前端 vue 如何区分开发环境
前端·javascript·vue.js
PandaCave1 小时前
vue工程运行、构建、引用环境参数学习记录
javascript·vue.js·学习
软件小伟1 小时前
Vue3+element-plus 实现中英文切换(Vue-i18n组件的使用)
前端·javascript·vue.js
醉の虾1 小时前
Vue3 使用v-for 渲染列表数据后更新
前端·javascript·vue.js
张小小大智慧1 小时前
TypeScript 的发展与基本语法
前端·javascript·typescript
hummhumm2 小时前
第 22 章 - Go语言 测试与基准测试
java·大数据·开发语言·前端·python·golang·log4j
chusheng18402 小时前
Java项目-基于SpringBoot+vue的租房网站设计与实现
java·vue.js·spring boot·租房·租房网站