标签：string val 默认 v-model 表单 标签 ror code 复杂
之前对vue只是有了一个大概的了解，项目中好多东西也没用上，所以，有空就对vue进行知识补充，记录一下零零碎碎
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>
计算属性在处理一些复杂逻辑时是很有用的。
例如：要反转一个字符串，我们可以这么写
<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 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值
监听属性在项目中经常用到，但是用的也不全面，这里只补充自己没用到过
watch : { count:function(newValue,oldValue){ //第一个参数是count的新值，第二个参数是旧值
document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue; } }
自己经常忘了动态绑定是怎么写，然后又在网上找，很麻烦，在这里一并记录下来
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>
1:v-bind动态绑定指令，默认情况下标签自带属性的值是固定的，在为了能够动态的给这些属性添加值，可以使用v-bind:你要动态变化的值="表达式"
2:v-bind用于绑定属性和数据 ，其缩写为“ : ” 也就是v-bind:id === :id
3:v-model用在表单控件上的，用于实现双向数据绑定，所以如果你用在除了表单控件以外的标签是没有任何效果的。
标签：string val 默认 v-model 表单 标签 ror code 复杂
原文地址：https://www.cnblogs.com/susutong/p/10009045.html
