props属性

用户9184480

发布于 2024-12-19 14:11:41

6200

代码可运行

文章被收录于专栏：云计算linux云计算linux

运行总次数：0

代码可运行

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>props属性</title>
    <script src="js/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <csdn message="hello"></csdn>
    </div>
    <script>
      //注册
      Vue.component('csdn',{
        //声明props
        props:['message'],
        //同样也可以在vm中像使用this.message使用
        template:'<span>{{message}}</span>'
      })
      //创建根实例;
      new Vue({
        el:'#app'
      })
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>prop实例</title>
    <script src="js/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <ol>
        <todo-item v-for="item in sites" v-bind:todo="item"></todo-item>
      </ol>
    </div>
    <script>
      Vue.component('todo-item',{
        props:['todo'],
        template:'<li>{{todo.text}}</li>'
      })
      new Vue({
        el:'#app',
        data:{
          sites:[
            {text:'CSDN'},
            {text:'aaa.net'},
            {text:'china.net'}]
        }
      })
    </script>
  </body>
</html>

输出：

CSDN
aaa.net
china.net

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>select列表元素</title>
    <script src="js/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <select v-model="selected" name="fruit">
        <option value="">请选择一个网站:</option>
        <option value="www.csdn.net">CSDN</option>
        <option value="www.aaa.com">aaa</option>
      </select>
      <!--内部div-->
      <div id="output">
        选择的网站是:{{selected}}
      </div>
    </div>
    <!--js-->
    <script>
      new Vue({
        el:'#app',
        data:{selected:''}
      })
    </script>
  </body>
</html>

下拉输出：...

选择的网站是:www.csdn.net

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-03-09，如有侵权请联系 cloudcommunity@tencent.com 删除

网站