028-86261949

当前位置:首页 > 技术交流 > vue-指令学习(上)

vue-指令学习(上)

2019/08/28 16:19 分类: 技术交流 浏览:1

 

 

指令是一个带有v-前缀的特殊标签属性, 指令属性的值预期是单个JavaScript表达式.

 

指令名称

指令作用

备注

v-html

显示与解析HTML代码

 

v-text

原封不动的展示

 

v-for

遍历与循环功能

遍历数字,字符串,对象,数组

v-bind

绑定属性

简单形式 :属性名="值"

v-model

双向绑定

只支持input,select,textarea

v-show

显示与隐藏

隐藏只是样式:style="display=none"

v-if

判断

v-if/v-else-if/v-else

v-on

绑定事件

简写 @事件名=方法名()

 

v-html与v-text

  • html会解析HTML标签(相当:innerHTML)
  • text不会解析HTML标签(相当:innerText)
<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vuejs/vue.js"></script></head><body>
<div id="app">
    <span id="myspan">{{msg}}</span>
    <!--
        使用指令写法来设置数据
        :指令中获取数据,不需要写表达式{{}}
    -->
    <span v-html="msg"></span>
    <span v-text="msg"></span></div>
<!--
    指令:vue设计的一种特殊的标签,v-指令名称
--><script>
 
    //原生的js代表为这个myspan加数据
    /**
     * innerText:会把加上的内容原样输出(不会当作html标签进行识别与编译)
     * innerHTML:会去识别与编译咱们的html标签
     */
    /*
    document.getElementById("myspan").innerHTML = "<h1>喔为...</h1>";
    document.getElementById("myspan2").innerText = "<h1>喔为...</h1>";
    */
    new Vue({
        el:"#app",
        data:{
            msg:"<h1>喔为...</h1>"
        }
    })
</script>
</body></html>


 v-for

  • 遍历咱们的数据(数字,字符串,对象,集合)
  • 数字就是普通的循环 for(var i=1;i<=数字;i++)
  • 字符串是拿到每一个字母
  • 对象循环 <span v-for="(v,k,i) in 对象"></span>
    • v:代表对象的属性值
    • k:代表对象的属性名
    • i:代表索引
  • 数组循环 <span v-for="(v,i) in 数组"></span>
    • v:代表对象的属性值
    • i:代表索引
<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vuejs/vue.js"></script></head><body>
<div id="app">
 
    <!--遍历数字 for(var i=1;i<=5;i++)-->
    <ul>
        <li v-for="v in num">{{v}}</li>
    </ul>
    <!--遍历字符串:拿到字符串中的每一个值-->
    <ul>
        <li v-for="v in name">{{v}}</li>
    </ul>
    <!--
        遍历对象
            (v) 如果只写一个值,只获取value的值
            (v,k) v:value的值,k:key(属性)
            (v,k,i) v:value的值,k:key(属性) ,i:索引
    -->
    <ul>
        <li v-for="(v,k,i) in smalltxt">{{k}} - {{v}} -{{i}}</li>
    </ul>
 
    <!--遍历数组
        (v,i)  v:当前的数据值  i:当前遍历索引
    -->
    <ul>
        <li v-for="(v,i) in hobbys">{{v}}==={{i}}</li>
    </ul></div>
<script>
 
    /**
     * v-for:进行相应的循环(数字,字符串,对象,数组)
     */
    new Vue({
        el:"#app",
        data:{
            num:5,
            name:"zhang",
            smalltxt:{
                name:"斗罗大罗",
                author:"杨哥",
                sn:"34325Nfe"
            },
            hobbys:["吃饭","睡觉","打豆豆","垃圾"]
        }
    })
</script>
</body></html>

#标签:vue,指令学习