姓名案例（插值语法）-CFANZ编程社区

姓名案例（插值语法）

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <!-- 
    slice 截取长度（从第几位，到第几位）
    第一种方法 插值语法：姓名：{{surname.slice(0,5 ) + '-' + lasname}}
        methods实现
     -->

    <div id="root">
      姓:<input type="text" v-model:value="surname"><br>
      名:<input type="text" v-model:value="lasname">
      <h6>姓名：{{surname.slice(0,5 ) + '-' + lasname}}</h6>
      <h5>姓名：{{fullname()}}</h5>
    </div>
    <script src="./vue.js" type="text/javascript" charset="utf-8"></script>
  </head>
  <body>
    <script>
      Vue.config.productionTip=false;
      //1.插值语法
      new Vue ({
        el : '#root',
        data: {
          surname:'魏',
          lasname:'世轩',
        },
        //methods实现
        methods:{
          fullname() {
            return this.surname.slice(1,2) + '-' + this.lasname;
          }
        },
      })

    </script>

  </body>
</html>

0 条评论