首页 > 其他分享 >Vue-指令-v-if和v-show

Vue-指令-v-if和v-show

时间:2023-07-03 20:55:41浏览次数:35  
标签:el www Vue methods show 指令

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">

    <div v-if="count == 3">div1</div>
    <div v-else-if="count == 4">div2</div>
    <div v-else>div3</div>
    <hr>
    <div v-show="count == 3">div v-show</div>
    <br>

    <input v-model="count">



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

    //1. 创建Vue核心对象
    new Vue({
        el:"#app",
        data(){
            return{
                username:"",
                url:"http://www.baidu.com",
                count:3
            }
        },
        methods:{
            show(){
                alert("我被点了。。。。")
            }
        }
    });

</script>

</body>
</html>

 

标签:el,www,Vue,methods,show,指令
From: https://www.cnblogs.com/Karl-hut/p/17524009.html

相关文章

  • Vue-指令-v-bind和v-model
      <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title></head><body><divid="app"><av-bind:href="url">点击一下&......
  • Vue-快速入门
     <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title></head><body><divid="app"><inputv-model="username">......
  • ChatGPT指令—饼图、柱状图、流程图
    今天分享生成图表的ChatGPT指令(提示词、Prompt),包括生成饼图、柱状图、流程图等。生成饼图指令:你现在是图形生成器,我将输入查询语言,你只显示该图像的预览,仅此而已。不要写解释,除非我指示你这样做,否则不要键入命令。当我需要用中文告诉你一些事情时,我会把文字放在大括号内{like......
  • vue 中动态class的写法
    https://blog.csdn.net/u012320487/article/details/121806858......
  • vue 兼容 展开语法
    js的展开语法最低兼容到chrome的60版本,客户端的chrome版本如果低于这个版本就需要做兼容项目根目录找到.browserslistrcn文件(有的项目是在package.json中配置browserslistrcn,配置内容是一样的),其后添加chrome最低兼容至哪个版本,如下>1%last2versionsnotdeadChro......
  • 驱动相关指令
    驱动相关指令自定义驱动的加载depmoddepmod:分析可载入模块的依赖性 whichwhich:在PATH变量指定的路径中,搜索某个系统命令的位置,并且返回第一个搜索结果 trap内建命令,用于执行接收到信号后将要采取的动作,常见用于在脚本被中断时完成清理工作 trap""SIGINT#忽略......
  • vue+element-ui 实现可编辑表格、动态渲染表头和表格数据、列向数据合计(每行末尾合计
    HTML部分代码<template> <div>  <el-container>   <el-header>Header</el-header>   <el-main>    <div>     //表格数据在这里::data="tableData"     <el-table      border    ......
  • 第2章 计算机指令集系统
    1.按照寄存器对指令集结构的分类三大类:堆栈、累加器、通用寄存器组通用寄存器组分三类:RM、RR、MM(R为寄存器,M为存储器)2.操作数寻址方式描述 3.指令集结构的功能设计在确定哪些基本功能用硬件来实现时,主要考虑的因素有3个:速度、成本与灵活性。用硬件实现的特点是速度快、成......
  • vue的渐进式是什么意思
    Vue只关注视图层,采用自底向上增量开发的设计。渐进式开发的关键是逐步增加功能,并按需引入。下面是一个更好的示例来展示渐进式的代码:首先,我们创建一个组件`TodoItem`来表示待办事项列表的每一项。此组件只包含一个标题属性和一个序号属性,用于渲染待办事项的标题和序号。``......
  • create-vue 创建vue项目
    1.前提环境已经安装16.0或者更高版本的node.js2.创建一个vue项目npminitvue@latest//将会安装并且执行create-vue 注意:npmrundev......