VUE——小知识

1、vue中{{}}是这样用的，{{}}有个限制就是，每个绑定都只能包含单个表达式。

{{10>9? '对了':'错误'}}

前端页面就会显示    对了{}

2、v_bind：可以绑定

<div v-bind:class="active">ok</div>

这个时候active就必须在下面一定义一个方法了。

3、v-if  条件渲染 

<div v-if="flag">我是王者</div>

在下面的方法中定义flag 是false就不会显示这句话，ture就显示。

4、v-else

<div v-if="flag">我是王者</div>
<template v-else> 
<p>1</p>
<p>2</p>
<p>3</p>
</template>

我是王者  和1234只能显示一个，是不是找到 if-else的感觉了。

5、v-show

就说下，不写例子了，同v-if效果相同。v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

6、列表渲染

<li v-for="item in names">
	<p>{{item}}}</P>   item只能用在同级下，其他地方不能用
</li>
names:["iwen","ime","ice"]   //写在方法中

7、事件传递参数

<button v-on:click="dataevent(content,$event)" type="button" name="button">第三个按钮</button>
<p>{{evetShow}}</p>     
content:"我是你爸爸",
dataevent(data,event){
this.evetShow=this.content,
console.log(data,event)  //显示页面捕捉信息
}

8、双向数据绑定

//message要先赋值给它在default中
<input v-model="message" placeholder="edit me">   //输入信 ,placeholder加载提示信息
<p>Message is: {{ message }}</p>    //显示信息

9、属性计算

 {{ message.split('').reverse().join('') }}  //message中字符串翻转

也可以写成方法
{{reverseMessage}}

computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }

 

这里有些小的技巧。大家看官方文档吧！参考。