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

     

  • 相关阅读:
    递归函数 二分查找
    内置函数
    迭代器 生成器 推导式
    装饰器函数的有用信息
    函数名 闭包 装饰器
    动态参数 命名空间
    C#_LINQ(LINQ to Entities)
    C#_MVC 自定义AuthorizeAttribute实现权限管理
    C#_MVC3之使用Authorize简单的验证登录(一)
    C#_MVC_分页update
  • 原文地址:https://www.cnblogs.com/durenlong/p/7081492.html
Copyright © 2011-2022 走看看