首页 > 其他分享 >vue条件渲染

vue条件渲染

时间:2022-10-31 15:35:37浏览次数:62  
标签:vue zjk name 渲染 -- 333 111 条件 222

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <script type="text/javascript" src="../js/vue.js"></script>

    <title>Document</title>
</head>
<body>
    <div id="root">
        <!-- <h1 v-show="false">欢迎{{name}}</h1> -->

        <!-- <div v-if="false">欢迎{{name}}</div> -->


        <div>欢迎{{n}}</div>
        <button @click="n++">点我n+1</button>

       <!--  <div v-show="n==1">111</div>
        <div v-show="n==2">222</div>
        <div v-show="n==3">333</div> -->


        <!-- v-if最开始使用并且不允许打断 -->
        <!-- <div v-if="n==1">111</div>
        <div v-else-if="n==2">222</div>
        <div v-else-if="n==3">333</div>
        <div v-else>aaa </div>
 -->
<!-- 
         <h2 v-show="n===1">你好</h2>
         <h2 v-show="n===1">小白</h2>
         <h2 v-show="n===1">zjk</h2> -->

         <!-- teplate与v-if的配合使用 -->
        <template v-if="n===1">
            <h2 >你好</h2>
            <h2 >小白</h2>
            <h2 >zjk</h2>
        </template>
    </div>

    <script>
    const vm=new Vue({
        el:"#root",
        data:{
            name:"xiao bai",
            n:0
        }
    })
    </script>
</body>
</html>

 

标签:vue,zjk,name,渲染,--,333,111,条件,222
From: https://www.cnblogs.com/xiaobaizitaibai/p/16844462.html

相关文章

  • vue防抖
     constdebounce=()=>{axios.get('/api/blog/administration/spot').then(res=>{if(res.data.code==200){}else{this.......
  • Sequelize查询条件限制
    Sequelize查询条件限制查询条件限制constOp=Sequelize.Op[Op.and]:{a:5}//且(a=5)[Op.or]:[{a:5},{a:6}]//(a=5或a=6)[Op.gt]:6......
  • vue中间件
    .env.development//部署(文件名).env.production//生产前(文件名)${process.env.VUE_APP_UR}//获取值写一个中间件在写前后台分离的时候肯定是需要发起各种求情......
  • Vue privide 和inject 依赖注入的用法
    from表示在可用的注入内容中搜索用的key,default当然就是默认值。 这里就是我们说的provide,向下提供信息,这里提供的是当前的vue实例,相当于给了后代一个接口。这样在任......
  • windows IIS中 vue的反向代理部署
    1、下载urlwrite,https://webpihandler.azurewebsites.net/web/handlers/webpi.ashx/getinstaller/urlrewrite2.appids2、下载ARRCache,https://webpihandler.azurewebsites......
  • VUE项目创建
    首先你的电脑安装了node.js,并进行配置vue创建一个新的项目首先cmdd:然后cd:/路径(这里是项目保存的路径)vueinitwebpack项目名vue修改端口号config的index.js第一步......
  • Vue-1
    vue​​1.认识MVVM结构​​​​2.我的第一个Vue实例​​​​3.闪烁问题​​​​4.三种赋值方式​​​​5.绑定属性v-bind:可以简写为:​​​​6.v-on:click("函数名字")触......
  • vue计算,监听属性插槽和动态组件
    计算属性如果{{函数()}},每次页面刷新,函数都会重新执行函数---》当属性来使用,缓存<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><ti......
  • Vue项目npm install下载依赖,报错:npm install 报错(npm ERR! errno -4048...(已解决✔)
    vue项目下载依赖npminstall报错:(npmERR!errno-4048,Error:EPERM:operationnotpermitted,)解决方法出现这种报错的时候有我用了清空缓存的方法:1,清理本地缓存:cach......
  • vue-axios增加操作
    <template><divclass="Insert"><labelfor="name">名称:</label><inputv-model="name"type="text"/><labelfor="location">部门:</label><inputv-mode......