2021/1/22 vue指令

VUE指令

v-text指令

    <p v-text="msg">msg:</p>
    <p>msg:{{msg}}</p>

这是根组件

msg:这是根组件

两种效果不一样，第一种将msg 赋值给P标签替换原有内容，第二种为插值表达式

v-html指令

v-html指令能够将数据内有 HTML标签的数据解析成，浏览器能够识别的数据

v-bind指令

写法 v-bind:属性 = “数据”，给属性绑定可变数据，比如URL，TITLE，等标签属性

数据可以含有字符串拼接 逻辑表达式 运算表达式，还可以调用函数

 

v-on指令

v-on 指令 用于调用函数 用法为：v-on:事件类型 = ‘函数名’

指令缩写：v-bind:属性 == :属性  v-on:事件 == @函数（）

 

跑马灯小游戏

 <button @click="startRoll()">开始</button>
    <button @click="stopRoll()">停止</button><br>
    <h2 style="color:red">{{content}}</h2>

export default {
  name: 'app',
  data () {
    return {
      msg: '<span>3213123</span>',
      on:'start',
      dowm: 'stop',
      content:'这是一个按钮',
      //进程锁
      intervalID:null,
    }
  },methods: {
    set(){
      this.msg = '123'
    },
    startRoll(){
      if(this.intervalID != null) return;
      this.intervalID = setInterval(()=>{
        var str = this.content;
        //定义切片，取出第一个字符
        var first = str.substring(0,1);
        // 取出后面的字符
        var end = str.substring(1);
        //将第一个字符放在第二段字符后，重新拼接字符串，通过MVVM的插值表达式，显示最新字符
        this.content = end +first
      },10000)
      
    },
    stopRoll(){
      //清空销毁时间函数
      clearInterval(this.intervalID);
      //将进程锁关闭
      this.intervalID = null;
    }    
  },
}
</script>

v-model表单数据绑定

能够实时更新表单数据

 v-model.lazy 懒绑定 在input元素失去焦点时（用户输入结束）才会同步数据

v-model.number 数值转换 文本框默认输入的数据类型是字符串，自动转化为其数字

v-model.toFixed 解决小数点问题