Vue 学习No.2

最新推荐文章于 2025-03-15 10:02:52 发布

祈iy

最新推荐文章于 2025-03-15 10:02:52 发布

阅读量165

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： Vue学习笔记

本文链接：https://blog.youkuaiyun.com/qq_38206823/article/details/91863463

Vue 专栏收录该内容

2 篇文章

订阅专栏

Vue学习笔记No.2

弱弱的表示，我又回来了

本次笔记主要为：条件语句、循环语句、计算语句

条件语句

条件语句在第一次笔记中已经有部分代码，但在这里还是在写一次

<div id="app">
	<input type="radio" value="0" v-model="ok">
	<label for="runoob">0</label>
	<input type="radio" value="1" v-model="ok">
	<label for="google">1</label>
	<input type="radio" value="2" v-model="ok">
	<label for="taobao">2</label>
    <template v-if="ok === '0'">
      <p>ok = 0</p>
    </template>
	<template v-else-if="ok === '1'">
      <p>ok = 1</p>
    </template>
	<template v-else>
      <p>ok 应该= 2</p>
    </template>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    ok: '1'
  }
})
</script>

以下为通过v-model绑定ok这个字段，然后每当radio进行选择时，将会把radio中的value赋值给ok，接下来进行if判断

<div id="app">
    <h1 v-show="ok">Hello!</h1>
</div>
<script>
new Vue({
  el: '#app',
  data: {
    ok: true
  }
})

v-show判断为true或者flase，true则显示，false则不显示

循环语句

<div id="app">
  <ul>
	<label>一个参数的循环：</label>
    <li v-for="i in object">
    {{ i }}
	</li><br>
	<label>两个参数的循环：</label>
    <li v-for="(i, key) in object">
    {{ key }}：{{ i }}
    </li><br>
	<label>三个参数的循环：</label>
    <li v-for="(i, key, index) in object">
    {{index}}.{{ key }}：{{ i }}
    </li><br>
	<label>无对象的数组支持2个参数：</label>
    <li v-for="(i, key) in object.listcoa">
    {{key}}.{{ i }}
    </li><br>
	<label>这种Json格式最多支持2个参数：</label>
    <li v-for="(i, key, index) in object.listcob">
    {{key}}：{{ i }}
    </li><br>
	<label>这种Json格式最多可以3个对象：</label>
    <li v-for="(i, key, index) in object.listcoc">
    {{index}}.{{key}}：{{ i }}
    </li>
  </ul>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    object: {
      name: '祈iy',
      url: 'http://www.runoob.com',
      slogan: '学的不仅是技术，更是梦想！',
	  listcoa: ["a","b","c"],
	  listcob: [{"name": "a", "value": "aa"},{"name": "b", "value": "bb"}],
	  listcoc: {"name": "a", "value": "b"},
    }
  }
})
</script>

通过上面的例子.

当循环一个数组时支持传入2个参数(a, b), a代表数组的值； b代表数组的下标。

当循环JSON时支持传入3个参数(a, b, c), a代表对象的值； b代表对象名； c代表对象的索引。

当循环JSON数组时支持传入2个参数(a, b,), a代表JSON数组的JSON； b代表JSON数组的下标。

计算语句

methods计算反转字符串

<div id="app">
  <p>原始字符串: {{ message }}</p>
  <p>反转字符串: {{ message.split('').reverse().join('') }}</p>
  <p>methods计算反转字符串: {{ reversedMessage() }}</p>
</div>

<script>
var vm = new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  },
  methods: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  }
})
</script>

computed计算反转字符串

<div id="app">
  <!-- 调用site中的get方法 -->
  <p>{{ site }}</p><br>
  <p>{{reversedMessage}}</p>
</div>

<script>
var vm = new Vue({
  el: '#app',
  data: {
	name: 'Google',
	url: 'http://www.google.com'
  },
  computed: {
    site: {
      // getter
      get: function () {
        return this.name + ' ' + this.url
      },
      // setter
      set: function (newValue) {
        var names = newValue.split(' ')
        this.name = names[0]
        this.url = names[names.length - 1]
      }
    },
	 reversedMessage: function(){
	 	return this.name.split('').reverse().join('')
	 }
  }
})
// 调用 setter， vm.name 和 vm.url 也会被对应更新
vm.site = '祈iy http://www.runoob.com';
document.write('name: ' + vm.name);
document.write('<br>');
document.write('url: ' + vm.url);
</script>