Articles under the label of Vue

  1. Home
  2. Vue

Vue.js基础 组件

基本示例全局组件<div id="test1"> <testa></testa> <testa></testa> </div>Vue.component('testa',{ data:function(){ return{ count:0...

  • legroft
  • March 10, 2020
  • No comments
    •

    Vue.js基础 表单

    文本v-model会根据控件类型自动选择正确的方法来更新元素var test1=new Vue({ el:'#test1', data:{ name:'legroft', describe:'22岁\r\n是学生' } });<div id="test1"> <input v-model=&...

  • legroft
  • March 4, 2020
  • No comments
    •

    Vue.js基础 事件处理

    监听事件使用v-on监听DOM事件<div id="test1"> <button v-on:click="counter+=1">加一</button> <p>按钮被点击了{{counter}}次</p> </div>var test1=new Vue({ ...

  • legroft
  • March 1, 2020
  • No comments
    •

    Vue.js基础 条件渲染与列表渲染

    条件渲染v-if当v-if里面的内容返回true时被渲染<div id="test1"> <p v-if="show">测试文字1</p> <p v-if="hide">测试文字2</p> </div>var test1=new Vue({ ...

  • legroft
  • February 28, 2020
  • No comments
    •

    Vue.js基础 样式绑定

    class的绑定使用v-bind进行class的绑定<div id="test1"> <div v-bind:class="{div_blue:isActive,'div_red':hasError}"></div> </div>.div_blue{ width: 200p...

  • legroft
  • February 26, 2020
  • No comments
    •

    Vue.js基础 计算属性

    Vue计算属性当我们需要重复对模板中的属性进行相同的计算后并调用的时候，我们就应该使用计算属性。比如，将字符串进行翻转<div id="example1"> <p>原始字符串"{{ message }}"</p> <p>翻转后的字符串"{{ reversedMes...

  • legroft
  • February 15, 2020
  • No comments
    •

    Vue.js基础 模板语法

    Vue实例实例化Vue来实现Vue应用基本格式var vm=new Vue({ // })添加内容data中定义属性methods中定义了函数括号可用来调用对象属性或函数返回值<div id="vue_det"> <h1>site:{{site}}</h1> <h1>url:{{url}}</h...

  • legroft
  • January 16, 2020
  • No comments