Vue-实操3

最新推荐文章于 2024-06-13 15:12:44 发布

Ellen-琳子

最新推荐文章于 2024-06-13 15:12:44 发布

阅读量139

点赞数

本文链接：https://blog.csdn.net/weixin_45905671/article/details/105926953

版权

用JavaScript表达式：
在使用了v-bind的html属性，或者使用了{{}}的文本。我们还可以执行一个JavaScript表达式

注意：只能是JavaScript表达式，不能是语句，比如：var a=1; a=2这样的是js语句,不是到达式了。

在模板中，可以根据条件进午渲染，条件用到的是v-if v-else-if以及v-else来组合实现的

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模版语法1</title>
</head>
<body>
     <!-- div#app 快捷生成<div id="app"></div> -->
     <!-- div.app 快捷生成<div class="app"></div> -->
      <div id="app">
          <!-- <p v-if="weather=='summer'">今天去看海</p>
          <p v-else-if="weather=='rain'">今天在家学习</p>
          <p v-else>今天吃火锅</p> -->
          <!-- <template v-if="age < 18">
              <p>上网</p>
              <p>逃学</p>
          </template>
          <template v-else-if="age >= 18 && age<25">
            <p>找工作</p>
            <p>健身</p>
          </template>
          <template v-else="age>25">
            <p>工资多少</p>
            <p>结婚</p>
          </template> -->
          <template v-if="loginType=='username'">
              <label for="">用户名</label>
              <input type="text" placeholder="用户名1" key='username'>
          </template>
          <template v-else-if="loginType=='email'">
            <label for="">邮箱</label>
            <input type="text" placeholder="邮箱" key='email'>
          </template>
          <button v-on:click="changeLoginType">切换登录类型</button>
          <!-- <button @click></button> -->
      </div>
</body>
</html>

<script	src="./vue.js"></script> 

<script>
    new Vue({
        el: "#app",
        data:{
            weather: 'rain',
            age: 18,
            loginType:'email'
        },
        methods:{
            changeLoginType:function(){
                this.loginType = this.loginType=='username'?'email':'username'

            }
        }

    })
</script>

Ellen-琳子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue-实操3

用JavaScript表达式：在使用了v-bind的html属性，或者使用了{{}}的文本。我们还可以执行一个JavaScript表达式注意：只能是JavaScript表达式，不能是语句，比如：var a=1; a=2这样的是js语句,不是到达式了。在模板中，可以根据条件进午渲染，条件用到的是v-if v-else-if以及v-else来组合实现的!DOCTYPE html>&l...
复制链接

扫一扫