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>
computed的默认只有getter, 当你需要setter时,得分别定义getter与setter。
我们可以使用 methods 来替代 computed,效果上两个都是一样的,但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。而使用 methods ,在重新渲染的时候,函数总会重新调用执行。
OK! 第二篇日记到此结束
上述的代码都可直接复制使用。
附一个菜鸟驿站的在线代码编辑器:https://www.runoob.com/try/try.php?filename=vue2-hw