zoukankan      html  css  js  c++  java
  • Vue基础-1(基本语法)

    <body>
    <div id="app">
    <span>{{msg}}</span>
    <!-- 修改数据源按钮 v-on用于绑定事件,简写方式可以用@符号代替v-on-->
    <input type="button" v-on:click="change" value="修改">

    <!-- 三元运算,如果flag等于true则显示男生否则显示女生-->
    <div>{{flag?'男生':'女生'}}</div>

    <!-- vue还可以进行加减操作-->
    <div>{{num+1}}</div>

    <!-- v-bind用于绑定标签属性,简写方式可以直接在href前加上:就可以-->
    <a v-bind:href="a_href">跳转</a>

      <!-- 循环数组与角标-->
      <div v-for="(item,index) in games">{{item}}--{{index}}</div>

      <!-- 循环value与key-->
      <div v-for="(item,key) in dict_games">{{item}}--{{key}}</div>
    </div>

    <script src="https://unpkg.com/vue/dist/vue.js"></script>

    <script>
    var vm = new Vue({
    el:"#app",
    // 修改数据源之前
    data:{
    msg:'hi,vue!',
    flag:true,
    num:1,
    a_href:'http://www.baidu.com'
           games:['绝地求生','英雄联盟','王者荣耀'],
           dict_games:{'name':'绝地求生','company':'蓝洞'}
            },
    // 修改数据源之后
    methods:{
    change(){
    this.flag = false;
    this.msg = '哈哈哈哈哈哈哈'
    this.a_href = 'http://www.taobao.com'
    }
    }
    })
    </script>

    </body>

    v-if与v-show的区别

    <span v-if="number==10086">移动</span>
    <span v-else-if="number==10010">联通</span>
    <span v-else>电信</span>

    <span v-show="number==10086">v-show-移动</span>
    <span v-show="number==10010">v-show-联通</span>

    注:v-if是判断条件走到哪行展示哪行,v-show是标签全部展示,但是不成立的标签用dispaly:none隐藏
  • 相关阅读:
    访问 IIS 元数据库失败
    C# List<T>运用
    Unicode 数据
    讲解SQL Server 2000的Collection排序规则
    delphi Format用法
    delphi 文件的操作
    class of 语句
    深入delphi编程
    delphi 事件委托 未看
    如何让delphi在启动时不自动创建空的工程?
  • 原文地址:https://www.cnblogs.com/wangyujian/p/14689846.html
Copyright © 2011-2022 走看看