vue补充
Posted susutong
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue补充相关的知识，希望对你有一定的参考价值。
之前对vue只是有了一个大概的了解，项目中好多东西也没用上，所以，有空就对vue进行知识补充，记录一下零零碎碎
1:v-for
v-for用来做循环渲染，最简单的就是
<li v-for="site in sites"> {{ site.name }} </li>
但是我们有时候也要用到当前值的索引值或者键
可以提供第二个参数为键名，如下
<ul> <li v-for="(value, key) in object"> //切记，第一个参数是值，第二个参数是键名 {{ key }} : {{ value }} </li> </ul>
可以提供第三个参数为索引
<ul> <li v-for="(value, key, index) in object"> //切记。第一个参宿是值。第二个参数是键，第三个参数是索引 {{ index }}. {{ key }} : {{ value }} </li> </ul>
2 计算属性
计算属性在处理一些复杂逻辑时是很有用的。
例如：要反转一个字符串，我们可以这么写
<div id="app"> {{ message.split(‘‘).reverse().join(‘‘) }} </div>
虽然这样写也可以实现目的，但是这样使代码看起来让人难以理解，但是使用computed计算属性就轻松多了
1 <div id="app"> 2 <p>原始字符串: {{ message }}</p> 3 <p>计算后反转字符串: {{ reversedMessage }}</p> 4 </div> 6 <script> 7 var vm = new Vue({ 8 el: ‘#app‘, 9 data: { 10 message: ‘Runoob!‘ 11 }, 12 computed: { 14 reversedMessage: function () { 16 return this.message.split(‘‘).reverse().join(‘‘) 17 } 18 } 19 })
computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值
3.监听属性
监听属性在项目中经常用到，但是用的也不全面，这里只补充自己没用到过
watch : { count:function(newValue,oldValue){ //第一个参数是count的新值，第二个参数是旧值
document.getElementById ("info").innerhtml = "修改前值为: " + oldValue + "，修改后值为: " + newValue; } }
4.class的绑定
自己经常忘了动态绑定是怎么写，然后又在网上找，很麻烦，在这里一并记录下来
1 <div id="app"> 2 <div v-bind:class="{ active: isActive }"></div> //如果isActive为真，就绑定active类名。否则，就不绑定
<div class="static" v-bind:class="{ active: isActive, ‘text-danger‘: hasError }"> </div> //多个之间用逗号隔开
3 </div>
5 v-bind和v-model
1:v-bind动态绑定指令，默认情况下标签自带属性的值是固定的，在为了能够动态的给这些属性添加值，可以使用v-bind:你要动态变化的值="表达式"
2:v-bind用于绑定属性和数据 ，其缩写为“ : ” 也就是v-bind:id === :id
3:v-model用在表单控件上的，用于实现双向数据绑定，所以如果你用在除了表单控件以外的标签是没有任何效果的。
以上是关于vue补充的主要内容，如果未能解决你的问题，请参考以下文章