vue中的指令

Posted 2020-10-07 前端婷婷

一、声明式渲染有两种：

1.插值用两个花括号如：{{内容}}

例子：html

<div id="app1">
    <p>{{message}}</p>
</div>

js:

var nv = new Vue({
    el:‘#app1‘,
    data:{
        message:‘哈喽！‘,
    }
})

2.绑定数据如：v-bind:标签属性=“插入的内容”

html:

<div id="app2">
    <span :title="message2">
        鼠标悬停在这里
    </span>
</div>

js:

var app2 =  new Vue({
      el:‘#app2‘,
      data:{
          message2:‘页面加载于‘+ new Date().toLocaleString()
      }
  })

二、条件与循环

1.v-if="一个变量"，在data中用tru和false来判断是否显示

html:

<div id="app3">
    <span v-if="seen">看见我</span>
</div>

js:

var app3 = new Vue({
    el:"#app3",
    data:{
        seen:true   //用true和false来判断能否看见内容
    }
})

 

2.v-for:指令可以绑定数组的数据来渲染一个项目列表如：

html:

<div id="app4">
    <ul>
        <li v-for="item in itemList">{{item}}</li>
    </ul>
</div>

 

js:

var app4 = new Vue({
    el:"#app4",
    data:{
        itemList:[‘第一项‘,‘第二项‘,‘第三项‘]
    }
})

三、处理用户输入

1.v-on 指令绑定一个事件监听器 

html:

<div id="app5">
    <span >{{message5}}</span>
    <button v-on:click="news">点击扭转</button>
</div>

js:

var app5 = new Vue({
    el:‘#app5‘,
    data:{
        message5:‘hello vue!‘
    },
    methods:{
        news:function(){
            this.message5 = this.message5.split(‘‘).reverse().join(‘‘)
        }
    }
})

2.数据双向绑定

html

<div id="app6">
    <span>{{message6}}</span>
    <input type="text" v-model="message6">
</div>

js:

var app = new Vue({
    el:"#app6",
    data:{
        message6:‘数据双向绑定‘
    }
})