zoukankan      html  css  js  c++  java
  • Vuejs之【内部指令】

    v-text   读取文本不能读取html标签,解析文本

      使用{{XXX}}这种情况是有弊端的,当我们网速很慢或者javascrit出错时,会暴露我们的{{XXX}}。v-text就是解决这个问题的。

    v-html  能读取html标签,解析html标签

      双大括号会将数据解释为纯文本,而非HTML。为了输出真正的HTML,你就需要使用v-html 指令。

      要注意的是:在正式环境上动态渲染HTML是很危险的,因为容易导致XSS攻击。

     

    v-if   显示与隐藏     v-show对比的区别就是是否删除dom节点   默认值为false

    v-else-if  必须和v-if连用

    v-else  必须和v-if连用  不能单独使用  否则报错   模板编译错误

      v-if用来判断是否加载html的DOM

    v-show 

      css中display属性,DOM已经加载,只是css控制没有显示。

    v-if和v-show的区别:

      v-if:判断是否加载,可以减轻服务器的压力,在需要时加载

      v-show:调整css display属性,可以使客户端操作更加流畅

    v-bind:class   

      三种绑定方法  

      1、对象型  '{red:isred}'  

       2、三目型   'isred?"red":"blue"'   

       3、数组型  '[{red:"isred"},{blue:"isblue"}]'

    v-on事件监听器

      键盘回车事件v-on:keyup.enter

     

    v-model 绑定数据源

      修饰符 .lazy:取代input监听change事件

        .number:输入字符串转为数字

        .trim:输入去掉首尾空格

    v-bind  处理HTML中的标签属性

      完整语法:v-bind:href=

      缩写语法::hred=

      修改CSS样式    绑定class样式(:class);绑定style(:style)

     

    v-cloak 防闪烁

      在vue渲染完指定的DOM后才进行显示,必须和css样式一起使用

    v-pre  把标签内部的元素原位输出

      在模板中跳过vue的编译,直接输出原始值。就是在标签中加入v-pre就不会输出vue中的data值了。

      <div v-pre>{{message}}</div>

      这时并不会输出我们的message值,而是直接在网页中显示{{message}}

    v-once  进入页面时  只渲染一次不在进行渲染

      举例:1.<div v-once>{{msg}}</div>

          2.@click.once="show"

     

    文本框的数字会默认转变成字符串,所以需要parseInt()函数进行整数转换。

  • 相关阅读:
    [HNOI 2009] 有趣的数列
    [HAOI2015] 树上染色
    [BZOJ 2654] tree
    【图论 搜索】bzoj1064: [Noi2008]假面舞会
    【倍增】7.11fusion
    【二分 贪心】bzoj3477: [Usaco2014 Mar]Sabotage
    【计数】7.11跳棋
    概述「贪心“反悔”策略」模型
    复习计划里的低级错误
    【模拟】bzoj1686: [Usaco2005 Open]Waves 波纹
  • 原文地址:https://www.cnblogs.com/Abner5/p/7767784.html
Copyright © 2011-2022 走看看