zoukankan      html  css  js  c++  java
  • vue 指令

    v-text和v-html的区别:
    v-text :会进行转译
    v-html:不会进行转译

    v-html demo :

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>vue入门</title>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    </head>
    <body>
      <div id="first">
            <div v-html="content"></div>
      </div>
      <script>
          new  Vue({
            //绑定上面的id el指的是vue实例跟哪个dom节点绑定
            el:"#first",
    
            data:{
             content:"<h1>愿所有努力不被辜负</h1>"
            }
          })
      </script>
    </body>
    </html>
    

      效果:

    v-text demo :

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>vue入门</title>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    </head>
    <body>
      <div id="first">
            <div v-text="content"></div>
      </div>
      <script>
          new  Vue({
            //绑定上面的id el指的是vue实例跟哪个dom节点绑定
            el:"#first",
    
            data:{
             content:"<h1>愿所有努力不被辜负</h1>"
            }
          })
      </script>
    </body>
    </html>
    

      效果:

    v-on:给元素绑定click事件,触发handleClick方法,定义在vue实例的methods

    v-on:给元素绑定click事件
    v-on:click="handleClick":触发handleClick方法
    methods: 定义在vue实例的methods被调用
    通过this.content 改变实例里面数据 vue实例尖听数据的改变 更新模板
    this.content="加油 是的"

    demo :

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>vue入门</title>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    </head>
    <body>
      <div id="first">
    
            <div v-on:click="handleClick">{{content}}</div>
      </div>
      <script>
          new  Vue({
            //绑定上面的id el指的是vue实例跟哪个dom节点绑定
            el:"#first",
            data:{
                  content:"明天会更好"
            },
            methods: {
              handleClick: function(){
                 this.content="加油 是的"
              }
            }
          })
      </script>
    </body>
    </html>

    效果:

     2018-05-01    11:59:31

  • 相关阅读:
    【SSRS】入门篇(六) -- 分组和总计
    【SSRS】入门篇(五) -- 设置报表格式
    【SSRS】入门篇(四) -- 向报表添加数据
    【SSRS】入门篇(三) -- 为报表定义数据集
    【SSRS】入门篇(二) -- 建立数据源
    【SSRS】入门篇(一) -- 创建SSRS项目
    【MS SQL】数据库维护计划之数据库备份(二)
    【MS SQL】数据库维护计划之数据库备份(一)
    【MS SQL】查看任务执行进度
    c++ 在客户端的GCC使用
  • 原文地址:https://www.cnblogs.com/guangzhou11/p/8975949.html
Copyright © 2011-2022 走看看