Run ❯
Get your own website
❯Run Code Ctrl+Alt+R
Save Code Ctrl+Alt+A
Change Orientation Ctrl+Alt+O
Change Theme Ctrl+Alt+D
Go to Spaces Ctrl+Alt+P
<!DOCTYPE html> <html> <head> <title>Show Food Image</title> <style> #app { border: dashed black 1px; width: 220px; padding: 20px; } #app > img { float: right; width: 55%; } li:hover { cursor: pointer; background-color: rgb(224, 224, 224); } #app > ol { list-style-type: none; margin: 0; padding: 0; } #app li { padding-left: 6px; border-radius: 5px; width: 70px; } </style> </head> <body> <h1>Example: Show Food Image</h1> <p>Click on a food name below to see an image of it.</p> <div id="app"> <ol> <li v-for="food in manyFoods" v-on:click="/vue/imgUrl = food.url"> {{ food.name }} </li> </ol> </div> <script src="https://www.comfortsoftwaregroup.com/web/webmastertoolbag/edibu.js"></script> <script src="https://www.comfortsoftwaregroup.com/web/webmastertoolbag/tongji.js"></script></body> </html>