[JavaScript知识库]【Vue】基本语法（条件判断、循环、用户输入处理）和常用事件

一、条件

v-if：用于判断，可以决定所作用的标签是否显示。

<div id="app01">
  <p v-if="seen">现在你看到我了，我是true</p>
</div>

var app = new Vue({
  el: '#app01',
  data: {
    seen: true
  }
})

v-else-if ：对，没错就是else if

v-else：就是 else

<div id="app02">
  <p v-if="size < 5">现在你看到我了，我小于5</p>
  <p v-else-if="size > 5">现在你看到我了，我大于5</p>
  <p v-else >现在你看到我了，我也不知道我多少</p>
  
</div>

var app = new Vue({
  el: '#app02',
  data: {
    size: 10
  }
})

二、循环

v-for：是被作用的标签可以循环重复

i in items：从vue属性items中去值，存入i中

{{ i.item}}：获取i（从vue属性items中去值）中的item属性

<div id="app03">
  <ol>
    <li v-for="i in items">
      {{ i.item}}
    </li>
  </ol>
</div>

var app = new Vue({
  el: '#app03',
  data: {
    items: [
      { item: '学习 JavaScript' },
      { item: '学习 Vue' },
      { item: '整个牛项目' }
    ]
  }
})

三、处理用户输入选择

vue中经常使用到和这类表单元素。vue使用v-model实现这些标签数据的双向绑定，它会根据控件类型自动选取正确的方法来更新元素。

反转字符串：

v-on：用于添加一个事件监听器，通过它调用在 Vue 实例中定义的方法

click：点击事件

methods： Vue 实例中定义的方法都要存储到methods中

reverseMessage：自定义的方法（方法名）

<div id="app04">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">反转消息</button>
</div>

var app = new Vue({
  el: '#app04',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

input操作

v-model：它能轻松实现表单输入和应用状态之间的双向绑定

v-model.azy：添加 lazy 修饰符，从而转变为使用 change 事件进行同步

v-model.trim：去除字符串首尾的空格

v-model.number：将数据转化为值类型

1.实现响应用户输入：

<div id="app05">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

var app = new Vue({
  el: '#app05',
  data: {
    message: '请重新输入'
  }
})

2.捕获下拉框中的被选择内容：

v-model=“selected”：其中的selected可以自定义，如果自定义那么{{ selected }}要改成{{ 自定义}}，data中的selected也高改。总之这三个地方必须统一。

<div id="app06">
  <select v-model="selected">
    <option value="" selected disabled>====请选择====</option>
    <option value="A被选">A</option>
    <option value="B被选">B</option>
    <option value="C被选">C</option>
  </select>
  <span>Selected: {{ selected }}</span>
</div>

 var app = new Vue({
    el: '#app06',
    data: {
      selected: ''
    }
  })

3.捕获单选框被选择的内容：

<div id="app07">
    <input type="radio" id="small" value="small被选择" v-model="picked">
    <label for="small">small</label>
    <br>
    <input type="radio" id="big" value="big被选择" v-model="picked">
    <label for="big">big</label>
    <br><br>
    <span>Picked: {{ picked }}</span>
</div>

var app = new Vue({
    el: '#app07',
    data: {
      picked: ''
    }
  })

4.捕获复选框被选择的内容：

<div id="app07">
    <input type="checkbox" id="one" value="选项一被选择" v-model="checkedNames">
    <label for="one">选项一</label>
    <input type="checkbox" id="two" value="选项二被选择" v-model="checkedNames">
    <label for="two">选项二</label>
    <input type="checkbox" id="three" value="选项三被选择" v-model="checkedNames">
    <label for="three">选项三</label>
    <br>
    <span>Checked names: {{ checkedNames }}</span>
</div>

var app = new Vue({
    el: '#app07',
    data: {
      checkedNames: []
    }
  })

四、常用事件