zoukankan      html  css  js  c++  java
  • vue属性

    vue属性的绑定:

       我们绑定属性数据的时候有些人会这样  <img src='{{url}}'>  虽然这让也可一出来,但你打开控制台时会发现有一条404的错误。

       所以我们在使用vue的时候要按vue的要求来写  这样<img v-bind:src='url'> 都不需要   {{}}  来写入。

       当然也会有简写 <img  :src='url'>  这样在控制台就不会有了。

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		<div id="box">
    			<img v-bind:src='url'>  
                   <img :src='url'> //简写 </div> <script src="vue.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> new Vue({ el:"#box", data:{ url:'01.png' }, methods:{ } }) </script> </body> </html>

        ps:当然所有属性都可以这样写。

    属性中有两个特殊的 class 和 style

      第一种class添加方法:

          <img  :src='url'  :class='[border]'>  这个数组里面的border代表了 new Vue()中写的数据,这个数据字符串可以代表

                          class名,数据和style中的class名相对应,这样不就写入了吗? 多个class名只要

                          在[class1,class2,.......] 这样就可以了。

      第二种class添加方法:

          <img :src='url' :class={border:true}> 这个写法json中的第一个就代表了style中的class名但是只有他后面的值是‘真’

                            的时候执行。也就是 等于 true。

      

      第一种style添加方法:

          <div  :style='[a,b]'>   当然在数据中定义就不相同了。  a:{background:'red'}  c:{border:'1px solid #000'}

                    这样就可以

      第二种方法:

          <div  :style='{background:"red",border:"1px solid #000"}'>  json这样就可以当然你也可以数据中写个json在放入    

     

  • 相关阅读:
    HDOj-1412
    HDOJ-2153
    HDOJ-1002
    紫书 例题 11-5 UVa 10048 (Floyd求最大权值最小的路径)
    紫书 例题11-4 UVa247 (Floyd判断联通)
    最短路模板
    紫书 例题 11-3 UVa 1151 (有边集的最小生成树+二进制枚举子集)
    紫书 例题 11-2 UVa 1395(最大边减最小边最小的生成树)
    紫书 例题 11-1 UVa 12219 (表达式树)
    紫书 习题 8-25 UVa 11175 (结论证明)(配图)
  • 原文地址:https://www.cnblogs.com/durenlong/p/7081492.html
Copyright © 2011-2022 走看看