vue html5 扩展api,vue常见api

[toc]

注：{{插值表达式}} 不能写语句

{{1+1=== 2 && “哈哈哈”}} 输出 哈哈哈

{{1+1 !== 2 && "哈哈哈"}} 输出 false

vueapi

1. v-text

使用v-text指令渲染标签内的文本内容

vue的指令都是 v-指令 这种格式，一旦使用了指令，虽然我们写的值看起来是字符串，但这个值已经是JavaScript所以在里面需要用单引号 表示其为字符串

{{msg}}

vue v-text 指令用于替换标签内的文本内容，如果存在v-text则插值表达式不起作用

{{msg}}

2. v-html

使用v-html，可以渲染文本中的标签

如果是富文本编辑器的内容，直接用插值表达式渲染的话，是被转移过的，那么html标签直接就会被输出到页面上，不会渲染标签

我爱你'">{{msg}}

v-html与v-text的区别就是，text不会解析标签，html则会解析标签

3. v-cloak

配合css样式，在数据渲染之前，让元素先加载你写的样式，当数据渲染结束后会一处该属性

[v-cloak] {

display: none

}

123

4. v-for

将数组数据循环渲染

• {{item}}

const app = new Vue({

el: "#root",

list:[{

id:1,

},

{

id：2，

}]

})

循环遍历对象渲染数据

• {{index}}：{{value}}

const app = new Vue({

el: "#root",

obj:{

id:1,

name: "hezhoushuai",

}

})

直接遍历数字

• {{n}}

• 5. v-bind

  v-bind:属性，用于动态绑定元素的属性

  v-bind:属性，可以直接简写为 :属性

  • {{item}}

  const app = new Vue({

  el: "#root",

  list:[{

  id:1,

  },

  {

  id：2，

  }]

  })

  6. v-if v-else v-elseif

  在标签内直接使用if语句

  大于2
  小于2

  const app = new Vue({

  ele:"#root",

  data:{

  count: 2,

  }

  })

  数据决定显示，通过移除或者插入dom节点来完成操作

  这是一个弹窗

  const app = new Vue({

  ele:"#root",

  data:{

  isShow: true,

  }

  })

  7. v-show

  决定元素的显示或者隐藏，通过css样式控制，对于经常显示和隐藏操作的元素，v-show的使用效率高于v-if

  比如:弹窗,手机注册和邮箱注册的两个tab的切换

  v-show和v-if的区别：v-show是通过css样式控制显示或者隐藏，v-if则是通过dom节点的删除增加来

  这是一个弹窗

  const app = new Vue({

  ele:"#root",

  data:{

  isShow: true,

  }

  })

  8. v-on

  v-on可以直接在标签内绑定事件

  隐藏/显示弹窗

  隐藏/显示弹窗

  这是一个弹窗

  const app = new Vue({

  ele:"#root",

  data:{

  isShow: true,

  }

  })

  如果如果想绑定一个函数则需要在传参时传入一个methods方法

  隐藏/显示弹窗

  这是一个弹窗

  const app = new Vue({

  ele:"#root",

  data:{

  isShow: true,

  },

  methods:{

  toggleModleShow(){

  isShow = !isShow

  },

  }

  })