Vue神奇特性大揭秘！V-model、V-ONCE、v-show，一文get

你知道为啥Vue这么厉害吗?它的特性就是能即刻更新数据，界面自动随之改变，是不是很惊人呀?

  
{{msg}}

  let app=new Vue({
    el:'#app',//标签的类名、id，用于获取元素
    //以键值对的形式存放用到的数据成员
    data:{
      msg:'显示的内容'
    },
    //包含要用到的函数方法
    methods:{
    }
  });

想操作界面就找标签元素，再搞个Vue实例出来。然后用JS，把Msg内容往P标签里一扔，搞定！牛不牛X？

告诉你们有种好东东叫V-model，用着超级顺手。组件和变量紧紧相连，组件数据改了，变量也秒变，好神奇？还有修饰符，比如.lazy，不改动时才传给组件；还有.trim，可以擦去用户输入中的空格，让输入更准确。

  

    
{{msg}}
    
{{msg}}
    
  

老铁们，给你们介绍个牛逼的玩意儿——V-ONCE。这个功能酷毙了，它没法儿改数据！比如说，你把东西输进那个输入框里，后头的P标签就跟着变了，但是，只要你用上了v-once的P标签，那就只显示最开始的数据，其他啥都改不了哈。

有种神器v-show跟v-if差不多，但它只显示满足条件的部分，不会无视不满足的部分，就好像给隐藏住了一样。所以要是你老弄那个元素出来隐藏或者显示的话，这个v-show不错！

显示内容
注释内容
v-show隐藏

说到另一个问题V-FOR是什么东东？它就像个好帮手，能帮我们把所有元素都列出来～格式，就是”v-for=(value, key) in traverseContent”。不管你是要查数组、对象还是字符串，找就能找到！比如说，在JavaScript里面有个叫做data的区域，里面有名啊、岁数这类信息。用V-FOR，统统把它们显示在网页上就行了~

请输入分值：

90">优秀
80">良好
60">中等
不及格

Vue这个软件真牛掰！里面有个v-html功能，让我们可以轻易地把HTML嵌入进来当成小元素展示。再说它的数据驱动方式，只要把数据绑定在class属性上，就能轻松搞定页面布局。举个例子，如果我们给person对象中的’name’一栏加上active类，马上就能吸引目光了。

  {{key+':'+value}}

你都学会使用Vue了？这东西真是方便，能用数据来控制网页，随心所欲如果还没用过Vue的朋友们赶紧去体验一下，保证会让你们上瘾~

标签内原来内容

好嘞，今天的推送就到这了！期待你们的反馈想说啥儿就大胆留言别忘了点赞加分享！下次见~

...
...