Vue v-指令相关

导入vue的字段

<script src="http://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

1.v-text 设置标签的内容

 var app=new Vue({
            el:"#app",
            data:{
                message:"ksjghksjgb!!!!!!",
                info:"可就是不公开锦标赛的"
            }
        })

<h2 v-text="message"></h2>
<h2 v-text="info"></h2>
<h2>{{ message}}</h2>

这里需要注意的是字符串的拼接，在使用v-text时

<h2 v-text="message">这是文字</h2>

这种的插入是没有效果的，而使用{{}}却是可以的

<h2>{{ message}}这是文字</h2>

另外在内部进行拼接，即使用''单引号是都能实现的

 <h2 v-text="message+'梳理客户给'"></h2>
    <h2 v-text="info+'sldhgf'"></h2>
    <h2>{{ message+'skdlng'}}</h2>

2.v-html 设置元素的innerHTML

<p v-html="text"></p>
<p v-text="text"></p>

  data:{
              // text:"百度",
                text:"<a href='http://www.baidu.com'>百度</a>"
            }
或变为数组

data:{

  ima:[
    "./img/img0.png",
    "./img/img1.png",
    "./img/img2.png",
    "./img/img3.png",
  ],

当text只是简单的文本的时候，v-html和v-text均只显示文本，但是当text是<a>标签的时候,v-html就成为了html

3.v-on 为元素绑定事件

Vue提供了可以使用@符号来代替v-on:的方法

<input type="button" value="单击事件" v-on:click="dova">
<input type="button" value="双击事件" v-on:dblclick="dova">
<input type="button" value="简写" @click="dova">

 dova:function () {
                    alert("做！！！！");
                },

注意当使用点击方法：function时

add:function (){}

需要用this.来代指当前指定的元素

<p @click="changeFood" v-text="food"></p>
 data:{
      food:"鸡蛋"
    },
 changeFood:function () {
        this.food="好吃"
      }

v-on还提供函数调用方式的数据绑定，并可以传入自定义参数

以下是官方文档的示例

<div id="app">
  <button v-on:click="counter += 1">Add 1</button>
  <p>The button above has been clicked {{ counter }} times.</p>
</div>
var example1 = new Vue({
  el: '#app',
  data: {
    counter: 0
  }
})

可以看到 v-on:click="counter += 1"就是直接调用的函数方法

v-on还可以接收调用的方法

     greet: function (event) {
       alert( this.name + '!')  //使用this
       if (event) {
         alert(event.target.tagName)  //输出event的dom元素是何种类型
       }
     }

v-on内联Javascript语句，这里也使用官方示例

<div id="example-3">
  <button v-on:click="say('hi')">Say hi</button>    
  <button v-on:click="say('what')">Say what</button>
</div>
new Vue({
  el: '#example-3',
  methods: {
    say: function (message) {
      alert(message)
    }
  }
})

点击按钮可以发现只输出了（）内的内容

v-on还提供了按键修饰符属性

<input type="text" @keyup.esc="hi">
hi:function (){
       alert("sdfsfsdf");
     }

这里使用@keyup来表明键盘事件，用 . 来连接具体的按键常用的有

.enter 或者.13
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

此外还提供了系统修饰键

 <input type="text" @keyup.alt.67="hi">  //Alt+c
  <div @click.ctrl="hi">Do something</div>    //Ctrl+Click

即按住 alt 键加c才能触发@keyup 或者按住ctrl再点击才能触发

.67就表示的是C键的keycode

这里贴出一个查询网址，可以用来查询按键的keycode http://keycode.info/

常用的修饰符按键有

.ctrl
.alt
.shift
.meta

4.v-show 根据真假控制页面元素显示状态（ture显示，false隐藏）

有三种方式控制

（1）直接控制

<img src="img/die.jpg" v-show="true">

（2）方法控制

<input type="button" value="切换" @click="changeshow">
<img src="img/die.jpg" v-show="isshow">
methods:{
     changeshow:function (){
     this.isshow=!this.isshow;
     }

（3）条件控制

<img src="img/die.jpg" v-show="age>=20">
<input type="button" value="条件控制" @click="changeAge" >
data:{
     isshow:false,
  age:15
},
  methods:{
     changeAge:function (){
       this.age++;
     }

5.v-if 根据表达式的真假，切换元素的显示与隐藏，与v-show不同，它是直接操纵dom元素

使用方法和v-show相似，只是后台操作元素方法不同，

v-show是隐藏掉，v-if是直接注释掉代码

频繁操作的元素使用v-show，反之使用v-if

6.v-bind 为元素绑定属性可以简写使用：。例：:class、:src等

整个流程图从@click点击事件开始。点击图片，调用isNo方法，可以改变默认为false的isActive的值，当isActive的值为true时，class=“active”，然后.active生效，出现边框

注意这里v-bland:class="isActive? ' active ':' ' " 理解为 isActive是true则class=“active” 否则为“” 使用的是三元运算符

另一种方法是使用对象的形式 v-bland：class=“{active：isActive}” 理解为 active这个类是否生效取决于isActive的值建议使用这种方式

7.v-for 根据数据生成列表结构，响应式的更新

（item，index）in 数据 item代表每一项，index表示索引，in不能更改

 <ul>
    <li v-for="(item,index) in band">  //item可以改变，index表示索引数字，从0开始
      {{item}}赛车{{index}}       //跟上方的item对应即可
    </li>
  </ul> 
  <p v-for="item in gas">{{item.name}}</p> //输出name
  <p v-for="item in gas" :title="item.name">{{item.name}}</p>  //鼠标移上会显示item.name的数值
var app=new Vue({
  el:"#app",
  data:{
    band:["F1","F2","F3","F4","F5"],
    gas:[
      {name:"90号汽油"},
      {name:"91号汽油"},
      {name:"92号汽油"},
    ]
  },
methods:{
    add:function (){
      this.gas.push({name:"93号汽油"})  //为数组中添加元素此处固定
    },
    remove:function (){   //移除数组中的元素，默认是从左移除
      this.gas.shift();
    }
}

7. v-model 获取和设置表单元素的值（双向绑定）

<input type="text" v-model="notes">
  <p v-text="notes"></p>
 data:{
     notes:"我是数据"
   },

当你更改text的值时，notes的数据也在改变，同样改变代码中的notes值，text的显示也会变，这就是双向绑定。

posted @ 2020-10-23 14:48 null_lii 阅读(187) 评论(0) 收藏举报

刷新页面返回顶部

null_lii

Vue v-指令相关

公告