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

     

  • 相关阅读:
    apt常用命令(安装,更新,删除)
    记录一次坑爹的VM连接主机的路程
    VM安装centos
    初窥DB2之insert语句
    关于虚拟机的linux不能使用shell连接时的处理方法
    linux命令之查看字符集
    趣图:学JavaScript
    PHP搭建大文件切割分块上传功能示例
    判断变量是否不为空,函数isset()、!empty()与!is_null()的比较
    Javascript 中 null、NaN和undefined的区别
  • 原文地址:https://www.cnblogs.com/durenlong/p/7081492.html
Copyright © 2011-2022 走看看