Vue.js了解学习（二）

条件语句

条件判断

• v-if:：v-if指令是根据条件表达式的值来执行元素的插入或者删除行为

条件判断使用 v-if 指令

// v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。

<div id="app">
    <p v-if="seen">A</p>
    <template v-if="ok">
      <h1>111</h1>
      <p>222</p>
      <p>333</p>
    </template>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    seen: true,
    ok: true
  }
})
</script>

//若都为true，输出：
//A
//111
//222
//333

• v-else：v-else元素必须立即跟在v-if或v-show元素的后面——否则它不能被识别

可以用 v-else 指令给 v-if 添加一个 “else” 块

//随机生成一个数字，判断是否大于0.5，然后输出对应信息

<div id="app">
	<div v-if="Math.random() > 0.5">
	  Sorry
	</div>
	<div v-else>
	  Not sorry
	</div>
</div>
	
<script>
new Vue({
  el: '#app'
})

• v-else-if
  v-else-if 在 2.1.0 新增，顾名思义，用作 v-if 的 else-if 块。可以链式的多次使用

<div id="app">
    <div v-if="type === 'A'">
      A
	</div>
	<div v-else-if="type === 'B'">
	  B
	</div>
	<div v-else-if="type === 'C'">
	  C
	</div>
	<div v-else>
	  Not A/B/C
	</div>
</div>
	
<script>
new Vue({
  el: '#app',
  data: {
    type: 'C'
  }
})
</script>

//输出：C

v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。

• v-show
  我们也可以使用 v-show 指令来根据条件展示元素
  用法和v-if一样

循环语句

v-for：指令基于一个数组渲染一个列表，它和JavaScript的遍历语法相似
v-for=“item in items”（items是一个数组，item是当前被遍历的数组元素）

<div id="app">
  <ol>
    <li v-for="site in sites">
      {{ site.name }}
    </li>
  </ol>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    sites: [
      { name: 'Runoob' },
      { name: 'Google' },
      { name: 'Taobao' }
    ]
  }
})
</script>

计算属性 computed

我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。

<div id="app">
  <p>原始字符串: {{ message }}</p>
  <p>计算后反转字符串: {{ reversedMessage }}</p>
  <p>使用方法后反转字符串: {{ reversedMessage2() }}</p>
</div>
​
<script>
var vm = new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  },
  methods: {
    reversedMessage2: function () {
      return this.message.split('').reverse().join('')
    }
  }
})
</script>
//输出：
//原始字符串: Runoob!
//计算后反转字符串: !boonuR
//使用方法后反转字符串: !boonuR

computed setter
computed 属性默认只有 getter ，不过在需要时你也可以提供一个 setter

//在运行 vm.site = '菜鸟教程 http://www.runoob.com'; 时，setter 会被调用，
// vm.name 和 vm.url 也会被对应更新。

<div id="app">
  <p>{{ site }}</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]
      }
    }
  }
})
// 调用 setter， vm.name 和 vm.url 也会被对应更新
vm.site = '菜鸟教程 http://www.runoob.com';
document.write('name: ' + vm.name);
document.write('<br>');
document.write('url: ' + vm.url);
</script>

//输出

//菜鸟教程 http://www.runoob.com

//name: 菜鸟教程
//url: http://www.runoob.com

监听属性 watch

进行千米与米之间的换算：
代码中我们创建了两个输入框，data 属性中， kilometers 和 meters 初始值都为 0。watch 对象创建了两个方法 kilometers 和 meters。
当我们再输入框输入数据时，watch 会实时监听数据变化并改变自身的值。

<div id = "computed_props">
         千米 : <input type = "text" v-model = "kilometers">
         米 : <input type = "text" v-model = "meters">
      </div>
	   <p id="info"></p>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#computed_props',
            data: {
               kilometers : 0,
               meters:0
            },
            methods: {
            },
            computed :{
            },
            watch : {
               kilometers:function(val) {
                  this.kilometers = val;
                  this.meters = this.kilometers * 1000
               },
               meters : function (val) {
                  this.kilometers = val/ 1000;
                  this.meters = val;
               }
            }
         });
         // $watch 是一个实例方法
		vm.$watch('kilometers', function (newValue, oldValue) {
			// 这个回调将在 vm.kilometers 改变后调用
		    document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue;
		})
      </script>

样式绑定 class style

class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。

Vue.js v-bind 在处理 class 和 style 时， 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。

class 属性绑定

v-bind:class 设置一个对象，从而动态的切换 class

<div :class="{ 'class-a': isA, 'class-b': isB}">Demo4</div>

Javascript代码：
data: {
  isA: false,  //当isA改变时，将更新class
  isB: true    //当isB改变时，将更新class
}
渲染后的HTML:
<div class="class-b">Demo4</div>

style(内联样式)

<div id="app">
  <div v-bind:style="[baseStyles, overridingStyles]">菜鸟教程</div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    baseStyles: {
      color: 'green',
      fontSize: '30px'
    },
	overridingStyles: {
      'font-weight': 'bold'
    }
  }
})
</script>