精华内容
下载资源
问答
  • 一、vue绑定属性 vue中通过v-bind将数据绑定到属性上,例如: 给div得title属性绑定数据title之后,div下所有元素用鼠标放上去得时候都会出现"绑定属性测试"得字样; 效果图如下: ...

    一、vue绑定属性
    vue中通过v-bind将数据绑定到属性上,例如:

    给div得title属性绑定数据title之后,div下所有元素用鼠标放上去得时候都会出现"绑定属性测试"得字样;
    img 属性绑定,第一种是普通加载,第二种是v-bind加载,第三种是另一种写法,结果都能正常显示图片

    title属性效果图如下:
    在这里插入图片描述
    img效果图:
    在这里插入图片描述
    二、绑定html,并自动解析html内容
    普通绑定和v-html绑定效果对比如下:
    在这里插入图片描述
    v-html可以将内容自动解析成html格式,而普通绑定只是显示内容不做任何接解析在这里插入图片描述
    三、绑定数据得另一种方法

    在这里插入图片描述
    在这里插入图片描述
    四、绑定class
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    效果图如下:
    在这里插入图片描述
    五、绑定style文件
    在这里插入图片描述
    效果如下:
    在这里插入图片描述

    六、练习-循环数据并将第一个高亮显示
    图中item获取得是值,key获取得是索引在这里插入图片描述在这里插入图片描述
    数据:
    在这里插入图片描述
    效果:
    在这里插入图片描述
    七、练习-循环显示图片
    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • 效果图: ...--04Vue绑定属性,绑定html,绑定class,绑定style--> <template> <!--根节点--> <div id="app"> <div>{{msg}}</div> <!--绑定属性--> <im...

    效果图:
    在这里插入图片描述

    源码(复制即可使用)
    App.vue 文件

    <!--04Vue绑定属性,绑定html,绑定class,绑定style-->
    <template>
      <!--根节点-->
      <div id="app">
        <div>{{msg}}</div>
        <!--绑定属性-->
        <img v-bind:src="imgurl">
        <!--绑定属性简写,省略v-bind -->
        <img :src="imgurl">
        <!--绑定html,放在div里面-->
        <div v-html="ihtml"></div>
        <!--绑定数据(另一种方法是:直接两层的花括号)-->
        <div v-text="msg2"></div>
        <!--绑定class,绑定的是下面的 red 属性  -->
        <div v-bind:class="{'red':true}">翟浩浩,改变世界3</div>
        <div v-bind:class="{'red':flag,'blue':!flag}">翟浩浩,改变世界4</div>
        <!--数组里面第一个元素变成红色-->
        <!--循环数租,拿到索引值是0的,为红色-->
        <ul>
          <li v-for="(item,key) in list" v-bind:class="{'red':key==0,'blue':key==1}">
            {{'key>>>'+key+'value>>>'+item }}
          </li>
        </ul>
        <!--绑定style-->
        <div class="box" v-bind:style="{'width':boxWith+'px'}">
    
        </div>
    
      </div>
    </template>
    
    <script>
      //暴露模块
      export default {
        name: 'app',
        //数据
        data() {
          return {
            msg: '翟浩浩,改变世界',
            msg2: '翟浩浩,改变世界2',
            imgurl: 'http://www.cdpf.org.cn/ywzz/xcwh_263/gzdt_264/201412/W020141231638892400544.jpg',
            ihtml: '<h2>标题二</h2>',
            flag: false,
            //数组
            list: ['元素一', '元素二', '元素三'],
            boxWith:'200',
          }
        }
      }
    </script>
    
    <style lang="scss">
      .red {
        color: red;
      }
    
      .blue {
        color: blue;
      }
      img{
        width: 100px;
        height: 100px;
      }
      .box{
        width: 100px;
        height: 100px;
        background-color: aquamarine;
      }
    
    </style>
    
    

    源码下载:
    vuedemo04
    https://download.csdn.net/download/zhaihaohao1/11112017

    展开全文
  • vue是如何绑定属性和class以及style的 下面我将会插入一段代码,本人在代码里做了相当详细的注释。 &amp;amp;lt;template&amp;amp;gt; &amp;amp;lt;!-- vue 的模板里面,所有的内容要被一个根节点...

    vue是如何绑定属性和class以及style的

    下面我将会插入一段代码,本人在代码里做了相当详细的注释。

    <template>
    
    <!-- vue 的模板里面,所有的内容要被一个根节点包含起来-->
      <div id="app">
        <h3>{{msg}}</h3> <!-- 绑定业务逻辑里的数据-->
        <br>
        <div v-bind:title="title">鼠标悬停试试看,冒号后面的title是固定语法,详情可见官方文档</div>
      
        <hr>
        <img src="./assets/M.jpg"/>
      
        <br>
        <br>
        <!-- 绑定属性 -->
        <img v-bind:src="url"/><!-- 绑定了业务逻辑层里的url-->
        <!-- 与下面这句语法效果一样 -->
        <br>
        <img :src='url'/>
        <br>
        <br>
    
        <!--绑定HTML -->
        {{h}}
        <!--与下面显示效果完全不同,请注意页面的显示-->
        <div v-html="h"></div>
        <br>
        <br>
    
        <!-- 绑定数据的另一种方法 -->
        <div v-text="msg">
        </div>
        <br>
        <br>
    
    
        <!-- v-bind:class  :class的使用 -->
        <div v-bind:class="{'red':flag}">  <!--red为在style中定义的一个class,会使用到'red' class里定义的样式。
                                             flag为引用的一个属性(为true时执行),在逻辑层里定义-->
        <!-- <div v-bind:class="'red'">  这种语法格式就是普通格式,没有引用flag属性 -->
          我是第一个div
        </div>
        <br>
        <br>
        <div :class="{'red':flag,'blue':!flag}"> <!--与上一种语法说明同理,只不过是多了一个'blue' class -->
          我是第二个div
        </div>
        <br>
        <br>
    
        <!-- 循环数据 第一个数据高量 -->
          <ul>
            <li v-for="(item,key) in list"><!--可以看到增加了一个key,key为索引值从0开始-->
             {{key}}---{{item}}             <!--在页面中仔细查看输出-->
            </li>
          </ul>
            <br>
          <ul>
            <li v-for="(item,key) in list"  :class="{'red':key==0,'blue':key==1}">
                                    <!-- 这里的class指定了 key=0应用'red'样式,key=1应用'blue'样式-->
              {{key}}---{{item}}
            </li>
          </ul>
          <br>
          <br>
    
    
          <!-- v-bind:style  :style的使用 -->
          <div class="box" v-bind:style="{'width':boxWdith+'px','height':boxHeight+'px'}">
          <!--应用'box'class——>绑定style属性——>手动改变width属性值需在逻辑层里添加boxWidth数据,height属性同理-->
          <!--绑定class也可以用到上面所说的语法,<div v-bind:style="{'width':boxWdith+'px'}" :class="'box'">-->
          我是另一个div
        </div>
    
      </div>
    </template>
     
    <script>
    export default { // 表示将组件暴露出去
      // name: 'App',  给组件起个名字,可以删除
      data () {   //业务逻辑里定义的数据 
        return {
          msg: '今天依然很好',  //  msg: "今天依然很好" 这里单引号和双引号是一样的结果
          title:'这里是个标题',
    
          //url:require('./assets/M.jpg'),  //在这里定义了url
          url:'./static/M.jpg',            //此种路径问题也是一个重点问题,在此先不做讲解
          h:'<h3>这里是一个h标签</h3>',     //在逻辑层里写上HTML,需要在template绑定才可以正常显示
          flag:true,
          list:['123','456','789'],
          boxWdith:500,
          boxHeight:500
        }
      }
    }
    </script>
    
    <style>
    .red{
      color: red;
      }
    
    .blue{
      color:blue;
      }
    
    .box{
      height: 100px;
      width: 100px;
      background: red;
    }
    </style>
    
    

    最后的运行效果是这样的

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述每一幅图都是连在一起的,一共有三张图。关于src路径问题,我将会在下一篇文章里做详细讲解。
    这是自己在学习过程中所作的一个小总结,若有疑问或是不解请在下方评论,谢谢。

    展开全文
  • Vue 绑定属性V-bind

    2019-06-15 23:48:53
    绑定属性V-bind:属性名=“变量名”,v-bind可以省略! V-bind:这个指令用来绑定属性的 效果图:

    绑定属性V-bind:属性名=“变量名”,v-bind可以省略!
    V-bind:这个指令用来绑定属性的

    在这里插入图片描述

    效果图:
    在这里插入图片描述

    展开全文
  • vue绑定属性带字符

    2020-08-07 19:09:57
    <a v-bind:href="'delUser?userid='+item.userId">删除</a>
  • 接上篇《4....一、绑定属性 上一篇我们讲解了Vue如何绑定数据,例如下面msg里面的值: <h2>{{msg}}</h2> 在Vue中就可以使用data()函数来动态绑定msg的值 <script> export default
  • vue 绑定属性设置css样式

    千次阅读 2019-07-23 17:52:31
  • vue 绑定属性(index)

    2019-03-14 14:14:00
    1 item 2 v- for ="item in links" ...绑定index时加上 .toString() 就不会报错了,因为这里的index是以string的数据格式存在的。 转载于:https://www.cnblogs.com/caoxen/p/10529991.html
  • vue模板里面,所有的内容需要被一个根节点包含起来 ...二、绑定属性 v-bind:...="属性名" 或 :....=“属性名” 三、绑定html v-html=“参数名称” 四、绑定对象 五、绑定列表 ...
  • vue属性绑定

    2021-04-26 22:48:37
    vue属性绑定 双向数据绑定v-model 本质就是属性绑定和事件的绑定 属性绑定页面获得数据hello值 事件绑定修改页面进而修改数据
  • 主要为大家详细介绍了vue绑定设置属性的多种方式,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • vue怎么绑定属性?下面本篇文章给大家简单介绍一下vue属性绑定。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。VUE属性绑定class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用...
  • vue 项目中目录结构 数据绑定 绑定属性 循环渲染数据 数据渲染 Vue 绑定属性 绑定Class 绑定Style vue数据双向 vue事件 vue中ref获取dom元素节点 MVVM <template> <div id="app"> <!-- 变量...
  • Vue属性绑定class属性问题——与顺序有关 今天在菜鸟教程上学习 vue.js,学到 vue.js样式绑定这一章,在对象中传入更多属性来动态切换class,它的原代码意思是一个100*100像素的块元素中原来的颜色是绿色,后被红色...
  • VUE属性绑定

    千次阅读 2019-01-05 09:20:23
    Vue.js v-bind 在处理 class 和 style 时, 专门增强了它。表达式的结果类型除了字符串之外,还可以是对象或数组。 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta ...
  • v-model属性双向绑定,可以把数据传到input中,同时在input中进行改动时,js中也会同步获取数据this.name 需要注意这些后面可以加些修饰符 lazy 相当于监听change操作,只有在失去焦点的时候,才会进行数据绑定了...
  • VUE 属性绑定

    2018-05-27 23:05:05
    VUE属性绑定使用v-bind其中class和style属性比较特殊有以下集中方式class:(1) v-bind:class=“[a,b,c]”,这种方式里面的a,b,c需要在vue实例中的data中声明(2)v-bind:class="{red:true,blue:false}&...
  • vue绑定class属性的值

    2020-03-05 13:08:52
    1、直接传递一个数组,用v-bind绑定 < h1 :class = " [ ' red ' , ' thin ' ] " > 我是一个字符串 h1 > 2、在数组中使用三元表达式 < h1 :class = " [ ' red ' , flag ? ' active ' : ' ' ] " > 我...
  • vue 绑定background 属性的写法

    千次阅读 2019-03-19 19:10:59
    参考链接 :https://blog.csdn.net/qq_34664239/article/details/79106570 元素 <template> <el-carousel trigger="click" height="386px" :autoplay=false arrow="never">...el-carouse...
  • vue属性绑定:v-bind指令

    千次阅读 2019-07-18 19:13:01
    1. 基本语法 语法: v-bind:属性名.修饰符="属性值" 简写: :属性名.... 属性名 ... vue绑定属性时是以html属性为基准的,h5中是不存在大小写的 属性值: data数据仓库中的变量名 修饰符: prop...
  • Vue之动态绑定属性

    2020-06-03 19:56:00
    Vue动态绑定属性 动态绑定 首先,我们来看看我们平时给一个a标签添加一个href属性是怎么做的。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name=...
  • vue属性绑定传参

    千次阅读 2018-08-02 17:46:01
    从网上查找,大部分网上都是说绑定属性不可以传递参数,绑定属性究竟是否可以传递参数,找到如下解决方案* html v-bind:title="titleWithOutStyle(type,item, ..., itemn)" js: computed: { ...
  • (案例+截图 )vue绑定 :data-zidingyi="response.false" 之后,页面DOM 不显示 正确的代码: <section v-for="(item,index) in res.data" :key="index" :class="'buleteam hidden buleteam _'+item.id" :id="'...
  • vue学习 4vue-属性绑定

    2019-04-04 11:59:03
    属性绑定一个值:v-bind:标签的属性名="vue对象的data对象里面的属性值(如果不是data对象里面的属性值,会报错)",双向绑定(v-model) 绑定一个html标签:v-html="websiteTag"。把标签的内容显示在DOM文档中 ...
  • Vue 属性绑定

    2019-01-22 21:25:07
    v-bind 绑定超链接 test.js实例化vue对象 // 实例化vue对象 new Vue({ el: '#vue_det', data: { site: &quot;菜鸟教程&quot;, url: &quot;http://www.runoob.com&quot;, alexa: &quot...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 9,983
精华内容 3,993
关键字:

vue绑定属性

vue 订阅