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在放入    

     

  • 相关阅读:
    Golden Tiger Claw (KM算法)
    Xor Sum题解>----(思维+递归)
    Mister B and PR Shifts(思维)
    Traffic Real Time Query System-(点双缩点+LCA)
    最大的位或----(极简代码)
    萌萌哒题解_倍增并查集
    连续攻击游戏(递增1)题解------(并查集)
    道路与航线 (连通块Dijkstra+拓扑序||spfa+slf优化)
    美团校招-表达式求值
    天猫前端电话面试
  • 原文地址:https://www.cnblogs.com/durenlong/p/7081492.html
Copyright © 2011-2022 走看看