• 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'
        }
      }
    })
  • 相关阅读:
    python网上开发执行环境
    bt5全称是Back Track five,是继BT3,BT4之后的最新版,这是一个linux环境的便携系统,可以放到U盘或者硬盘中启动,对本身硬盘没有影响,无需在本地安装。
    ubuntu安装mysql的步骤和配置总结
    Django 安装MySQLdb模块
    OpenCV3编程入门笔记(一)
    论文笔记---Deblurring Shaken and Partially Saturated Images
    win7 64位操作系统 电脑桌面出现this computer is being attacked的窗口
    论文笔记(一)---翻译 Rich feature hierarchies for accurate object detection and semantic segmentation
    OpenCV3计算机视觉Python语言实现笔记(五)
    OpenCV3计算机视觉Python语言实现笔记(四)
  • 原文地址:https://www.cnblogs.com/camille666/p/vue_dom_base_using.html
Copyright © 2020-2023  润新知