Vue.js学习详细课程系列--共32节（3 / 6）

矫情吗；* 2023-09-25 21:15 79阅读 0赞

#### Vue.js学习课程（3 / 6） ####

*   *   *  13. 条件渲染
         *   *  知识点
             *  v-if
         *  14. 元素显示v-show
         *   *  知识点
             *  v-show
         *  15. 列表渲染
         *   *  知识点
             *  v-for
         *  16. JS对象迭代
         *   *  知识点
             *  v-for
         *  17. 事件处理器
         *   *  知识点
             *  v-on:(event)
         *  18. 表单控件绑定
         *   *  知识点
             *  v-model

#### 13. 条件渲染 ####

##### 知识点 #####

*  v-if
 *  v-else-if
 *  v-else

##### v-if #####

判断vue.js的变量的值，然后执行页面渲染逻辑。（if-elseif-else）

<div id="myApp">
        <h1 v-if="result == 0">成绩未公布</h1>
        <h1 v-else-if="result < 60">{
       {result}}分 - 考试不及格</h1>
        <h1 v-else-if="result < 80">{
       {result}}分 - 还需努力</h1>
        <h1 v-else>{
       {result}}分 - 考得不错，玩游戏吧！</h1>
        <button @click="btnClick">考试成绩</button>
    </div>
    <script>
        var myApp = new Vue({
          
            el: '#myApp', 
            data: {
          
                result: 0
            },
            methods: {
          
                btnClick: function(){
          
                    this.result = Math.round(Math.random() * 100);
                },
            },
        });
    </script>

#### 14. 元素显示v-show ####

##### 知识点 #####

*  v-show

##### v-show #####

标记是否显示html元素。(注意：v-show设置的标记在html DOM中不会消失)

<div id="myApp">
        <h1 v-show="result">任天堂新一代主机Switch</h1>
        <button @click="btnClick">考试成绩</button>
    </div>
    <script>
        var myApp = new Vue({
          
            el: '#myApp', 
            data: {
          
                result: true
            },
            methods: {
          
                btnClick: function(){
          
                    this.result = !this.result;
                },
            },
        });
    </script>

#### 15. 列表渲染 ####

##### 知识点 #####

*  v-for

##### v-for #####

循环数组元素，整理内容显示到页面上。

<div id="myApp">
        <ul>
            <li v-for="(game, index) in games">({
       {index}}) {
       {game.title}} / 售价：{
       {game.price}}元</li>
        </ul>
    </div>
    <script>
        var myApp = new Vue({
          
            el: '#myApp', 
            data: {
          
                games: [
                    {
          title:"勇者斗恶龙",price:500},
                    {
          title:"库跑卡丁车",price:400},
                    {
          title:"马里奥世界",price:550},
                ]
            },
        });
    </script>

#### 16. JS对象迭代 ####

##### 知识点 #####

*  v-for

##### v-for #####

循环JS对象，把对象内容循环显示到页面上。

<div id="myApp">
        <h1>JS对象迭代</h1>
        <div v-for="(value, key) in mygame">
            {
       { key }} : {
       { value }}
        </div>
    </div>
    <script>
        var myApp = new Vue({
          
            el: '#myApp', 
            data: {
          
                mygame: {
          
                    title: "乌贼娘2代",
                    price: 350,
                    pubdate: "2017年夏季",
                    category: "射击",
                    agerange: "全年龄",
                },
            },
        });
    </script>

#### 17. 事件处理器 ####

##### 知识点 #####

*  v-on:(event)/@(event)

##### v-on:(event) #####

页面元素的事件绑定。（click,keyup,load等等）

<div id="myApp">
        <h1>事件处理器</h1>
        <input id="txtName" v-on:keyup="txtKeyup($event)">
        <button id="btnOK" v-on:click="btnClick($event)">OK</button>
    </div>
    <script>
        var myApp = new Vue({
          
            el: '#myApp', 
            data: {
          },
            methods: {
          
                txtKeyup: function(event){
          
                    this.debugLog(event);
                },
                btnClick: function(event){
          
                    this.debugLog(event);
                },
                debugLog:function(event){
          
                    console.log(
                        event.srcElement.tagName, 
                        event.srcElement.id, 
                        event.srcElement.innerHTML, 
                        event.key?event.key:""
                    );
                },
            },
        });
    </script>

#### 18. 表单控件绑定 ####

##### 知识点 #####

*  v-model
 *  input\[type=“text”\]

##### v-model #####

为表单控件元素创建双向数据绑定。（将JS变量的值“快速”设定到控件上，然后将用户输入的内容“快速”设置回JS变量）

<div id="myApp">
        <h1>表单控件绑定</h1>
        <input type="text" v-model="message" placeholder="来呀，编辑我吧！">
        <p>Message is: {
       { message }}</p>
        <textarea v-model="message" placeholder="加入多行编辑" rows="8" cols="34"></textarea>
    </div>
    <script>
        var myApp = new Vue({
          
            el: '#myApp', 
            data: {
          
                message: "我爱马里奥",
            },
            methods: {
          
            },
        });
    </script>