• vue中的dom基本渲染


    一、输出动态标签
    请只对可信内容使用HTML插值,绝不要对用户提供的内容使用插值,容易导致xss攻击。

    <div id="J_app">
        <div v-html="rawHtml"></div>
    </div>
    var vapp = new Vue({
      el: '#J_app',
      data: {
        rawHtml:'<p>输出标签和内容</p>'
      }
    })

    二、输出动态文本内容

    <div id="J_app"> {{ info }} </div>
    var vapp = new Vue({
      el: '#J_app',
      data: {
        info: 'Hello Vue!'
      }
    })

    三、输出标签的id属性动态值

    <div id="J_app">
        <span v-bind:id="dynamicId">这个标签的id是动态的</span>
        <span :id="dynamicId">v-bind缩写,这个标签的id是动态的</span>
    </div>
    var vapp = new Vue({
      el: '#J_app',
      data: {
        dynamicId: 'J_tab'
      }
    })

    四、输出标签的title属性动态值

    <div id="J_app">
      <span v-bind:title="labelTitle">
        鼠标悬停几秒钟查看此处动态绑定的提示信息!
      </span>
      <span :title="labelTitle">
        v-bind缩写,鼠标悬停几秒钟查看此处动态绑定的提示信息!
      </span>
    </div>
    var vapp = new Vue({
      el: '#J_app',
      data: {
        labelTitle: '页面加载于 ' + new Date().toLocaleString()
      }
    })

    五、输出标签的class属性动态值

    1、对象写法

    <div id="J_app">
      <div class="initCls" v-bind:class="{ cls1: isCur, 'cls-2': hasError }">对象写法</div>
    </div>
    var vapp = new Vue({
      el: '#J_app',
      data: {
        isCur: true,
        hasError: false
      }
    })
    <div id="J_app">
      <div v-bind:class="classObject">对象写法</div>
    </div>
    var vapp = new Vue({
      el: '#J_app',
      data: {
        classObject: {
          cls1: true,
          'cls-2': false
        }
      }
    })
    <div id="J_app">
      <div v-bind:class="classObject">对象写法</div>
    </div>
    var vapp = new Vue({
      el: '#J_app',
      data: {
        isCur: true,
        hasError: false
      },
      computed: {
        classObject: function () {
          return {
            cls1: this.isCur && !this.hasError,
            'cls-2': this.hasError
          }
        }
      }
    })

    2、数组写法

    <div id="J_app">
      <div v-bind:class="[classone, classtwo]">数组写法</div>
    </div>
    var vapp = new Vue({
      el: '#J_app',
      data: {
        classone: 'cls1',
        classtwo: 'cls-2'
      }
    })
    <div id="J_app">
      <div v-bind:class="[isCur ? classone : '', classtwo]">数组写法,三目运算符</div>
    </div>
    var vapp = new Vue({
      el: '#J_app',
      data: {
        isCur: true,
        classone: 'cls1',
        classtwo: 'cls-2'
      }
    })
    <div id="J_app">
      <div v-bind:class="[{ cls1: isCur }, classtwo]">数组写法,内嵌对象</div>
    </div>
    var vapp = new Vue({
      el: '#J_app',
      data: {
        isCur: true,
        classtwo: 'cls-2'
      }
    })

    六、输出标签的style属性动态值

    <div id="J_app">
      <div v-bind:style="{ color: activeColor, fontSize: fontNum + 'px' }">style属性</div>
    </div>
    var vapp = new Vue({
      el: '#J_app',
      data: {
        activeColor: 'red',
        fontNum: 30
      }
    })
    <div id="J_app">
      <div v-bind:style="styleObject">style属性</div>
    </div>
    var vapp = new Vue({
      el: '#J_app',
      data: {
        styleObject: {
          color: 'red',
          fontSize: '30px'
        }
      }
    })
  • 相关阅读:
    window.onload和document.ready/jquery页面加载事件等的区别
    JAVA面试题大全
    BIO NIO AIO的知识扫盲
    类的加载过程详细解释
    nginx的Rewrite和其他相关配置
    【微服务架构设计】DDD
    【重构】
    【多线程】Lock接口与其实现类
    【三方件】汇总
    【SpringBoot-SpringSecurity】安全响应头+防攻击 ~~ TODO
  • 原文地址:https://www.cnblogs.com/camille666/p/vue_dom_base_using.html
Copyright © 2020-2023  润新知