vue指令集

v-text

  • 将data里面的数据渲染到标签文本上
<h1 v-text = "message"></h1>   // => innerHext
<h1> {{arr}} </h1>
<script>
const vm = new Vue({
	el : '#app',
	data:{
		message : 'hello world',
		arr : [ 1,2,3,4 ],
		elStr : '<span> hello world</span>'
	}
})
</script>

v-html

  • 将data里面的标签渲染到页面上
 <h1 v-html = "elStr"> </h1>

v-if , v-else-if , v-else

  • 通过控制标签是否在dom中,来控制标签的显示
 <div class = "box" v-if = "flag === 'A'"> </div>
 <div class = "box" v-if = "flag === 'B'"> </div>
 <div class = "box" v-if = "flag === 'C'"> </div>
 <div class = "box" v-if = "flag === 'D'"> </div>


const vm = new Vue({
	el : '#app',
	data:{
		flag : 'A' //通过改变flag的值就可以控制显示哪个盒子	
	}
})

v-show

  • 通过控制标签的display来控制标签是否显示 true -> display : “” , false -> display :none
  • v-if有更高的切换开销 ; v-show有更高的初始化开销
<div v-show = "flag === 'A'"></div>
<div v-show = "flag === 'B'"></div>
<div v-show = "flag === 'C'"></div>
<div v-show = "flag === 'D'"></div>

const vm = new Vue({
	el : '#app',
	data:{
		flag : 'A' //通过改变flag的值就可以控制显示哪个盒子	
	}
})

v-for

  • v-for 可以遍历数字,字符串 ,数组,对象
<ul>
	//遍历数字
	<li v-for = "( n , i ) in 10">
	{{n}}  {{i}}
	</li>
	//遍历字符串
	<li v-for = "( n , index ) in 'hello world'">
	{{n}}  {{i}}
	</li>
	//遍历数组
	<li v-for="(item, index) in arr">
        {{item}} ---- {{index}}
      </li>
      //遍历对象
      <li v-for="(item, key, index) in obj">
        {{item}} ---- {{key}}  ---- {{index}}
      </li>
</ul>

 const vm = new Vue(
      {
      el: '#app',
      data: {
        arr: ['a', 'b', 'c'],
        obj: {
          name: 'zhangsan',
          age: 20,
          gender: '男'
        },
        newArr: [
          {name: '张三', gender: '男'},
          {name: '李四', gender: '女'},
          {name: '王五', gender: '男'}
        ]
      }
    });

v-bind

-给标签属性赋值 ( title , alt , src , id , value , type , name , ,class , style)

<a v-bind:href="path">百度一下</a>
    <!-- 简写 -->
<a :href="path">百度一下</a>

const vm = new Vue(
      {
      el: '#app',
      data: {
        message: 'hello vue',
        path: 'http://www.baidu.com'
      }
    });

v-on

  • 给标签添加绑定事件
  • 修饰符 :
    1. prevent : 阻止默认事件
    2. stop : 阻止事件冒泡
    3. self : 只有事件发生在本标签上才执行
    4. capture : 事件捕获
<li class="tab" v-on:click="changeAction('home')" :class="{active: flag==='home'}">首页</li>
<li class="tab" v-on:click="changeAction('category')" :class="flag === 'category' ? 'active': ''">分类</li>
<li class="tab" v-on:click="changeAction('setting', $event)" :style="{color: flag==='setting'?'#fff':''}">设置</li> 

const vm = new Vue(
      {
      el: '#app',
      data: {
        flag: 'home',
        tabData: [
          {name: '首页', id: 'home'},
          {name: '分类', id: 'category'},
          {name: '设置', id: 'setting'},
        ]
      },
      // 实例的方法
      methods: {
        changeAction(value, ...rest){
          console.log(rest);
          this.flag = value;
        }
      }
    });

v-model

  • 当标签内的内容发生改变时,动态的改变data里面的数据
<input type="text" v-model="message"/>
//当input框里面的数据发生改变时,message也发生改变
©️2020 CSDN 皮肤主题: 黑客帝国 设计师:上身试试 返回首页