view简易版，无需搭建环境方便测试

最新推荐文章于 2021-04-13 19:10:32 发布

satya1

最新推荐文章于 2021-04-13 19:10:32 发布

阅读量152

点赞数

本文链接：https://blog.csdn.net/weixin_41042671/article/details/80795242

版权

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <meta http-equiv=""="X-UA-Compatible:" content="id=edge">
    <title></title>
    <script src="https://cdn.bootcss.com/vue/2.4.1/vue.min.js" type="text/javascript">

    </script>
  </head>
  <body>

    <div id="view2">

    </div>

    <div id="view">
      name:{{ name }}
      <br>
      qq:{{ qq }}
    </div>

    <button id="button">change name</button>


    <script>
      const vm = new Vue({
        el:"#view",
        data:{
          name:"wss",
          qq:"456789"
        }
      });

      const obj = {
        data:{
          name:"hello world"
        }
      }


      Object.defineProperty(obj,"name",{
        get(){
          return this.data.name;

        },
        set(v){
          this.data.name = v;
        }
      })

      view2.innerHTML = obj.name;
      setTimeout(function(){
        obj.name = "hello"
      },1000);


      button.onclick = function(){
        vm.name = "xx";
      }

    </script>

  </body>
</html>

另一个例子

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <meta http-equiv=""="X-UA-Compatible:" content="id=edge">
    <title></title>
    <script src="https://cdn.bootcss.com/vue/2.4.1/vue.min.js" type="text/javascript">

    </script>
  </head>
  <body>

        <button id="button">changename</button>

    <div class="iloveu">
      {{ name }}
      <hr>
      {{ doublename() }}
      <hr>

      {{ num1 }}
      <br>
      {{ num2 }}
      <hr>
      <button id="jisuan">都加{{ num }}</button>

      <button id="jian"> - </button>
      <button id="jia"> + </button>


    </div>


    <hr>









    <script>

      const vm = new Vue({
        el:".iloveu",
        data:{
          name:"wss",
          num1:1,
          num2:2,
          num:1
        },
        methods:{
          change(name){
            this.name = name;
          },
          doublename(){
            return this.name + this.name
          },
          jian(){
            this.num = this.num -1;
          },
          jia(){
            this.num = this.num +1;
          },
          jisuan(){
            this.num1 = this.num1 + this.num;
            this.num2 = this.num2 + this.num;
          }

        }
      });

      const buttonDom = document.querySelector("#button");
      const jisuanDom = document.querySelector("#jisuan");
      const jianDom = document.querySelector("#jian");
      const jiaDom = document.querySelector("#jia");
      buttonDom.onclick = function(){
        vm.change("new name");
      }

      jianDom.onclick = function(){
        vm.jian();
      }

      jiaDom.onclick = function(){
        vm.jia();
      }

      jisuanDom.onclick = function(){
        vm.jisuan();
      }




    </script>

  </body>
</html>

计算属性和方法属性

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <meta http-equiv=""="X-UA-Compatible:" content="id=edge">
    <title></title>
    <script src="https://cdn.bootcss.com/vue/2.4.1/vue.min.js" type="text/javascript">

    </script>
  </head>
  <body>
    <div id="namegame">
      <div class="">
        {{ firstname }}
      </div>
      <div class="">
        {{ secondname }}
      </div>
      <div class="">
        {{ allname() }}
      </div>

      <hr>



        {{ num1 }}
        <button οnclick="--vm.num1">-</button>
        <button οnclick="++vm.num1">+</button>
        + {{ num2 }}
        <button οnclick="--vm.num2">-</button>
        <button οnclick="++vm.num2">+</button>
        = {{ result() }}

      </div>





    <script>
      const vm =  new Vue({
          el:"#namegame",
          data: {
            firstname:"wang",
            secondname:"ss",
            num1:11,
            num2:12
          },
          methods: {
            allname(){
              return this.firstname +this.secondname;
            },
            result(){
              return this.num1+this.num2;
            }
          },
          // computed: {
          //   result{}{
          //     get(){
          //       return this.num1+this.num2;
          //     },
          //     set(v){
          //       this.num1 = this.num1/2;
          //       this.num2 = this.num2/2;
          //     }
          //
          //   }
          // }
        });


    </script>

  </body>
</html>

satya1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
view简易版，无需搭建环境方便测试

&lt;!DOCTYPE html&gt;&lt;html lang="en" dir="ltr"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta name="viewport" content="width=device-width"&gt;
复制链接

扫一扫